typescript - Pixi.js SvelteKit-ში იძლევა 'self არ არის განსაზღვრული' შეცდომას მხოლოდ მშენებლობის დროს

როგორც სათაური ამბობს, როდესაც იყენებთ Pixi.js-ს SvelteKit-ში, მხოლოდ და მხოლოდ აპლიკაციის აწყობის დროს გამოიტანს შეცდომას "self არ არის განსაზღვრული", და ეს პრობლემის წყარო არის @pixi/settings მოდული. მე შევეცადე ყველა შესაძლებელი გზა, რაც ვიცოდი მისი გამოსასწორებლად. პირველ რიგში, გამოვიყენე შიმი, რომ მისცემოდა ყალბი ინფორმაცია, მაგრამ ეს არ გამოუვიდა:

if (typeof window === 'undefined') {
    globalThis.window = {} as any;
}
if (typeof self === 'undefined') {
    globalThis.self = globalThis.window;
}
if (typeof document === 'undefined') {
    if (window.document) {
        globalThis.document = window.document;
    } else {
        globalThis.document = window.document = {
            createElement: (elementName: string) => {
                switch (elementName) {
                    case 'canvas':
                        return {
                            getContext: (contextName: string) => {
                                switch (contextName) {
                                    case 'webgl':
                                        return {
                                            getExtension: () => {}
                                        };
                                    case '2d':
                                        return {
                                            fillRect: () => {},
                                            drawImage: () => {},
                                            getImageData: () => {}
                                        };
                                }
                            }
                        };
                }
            }
        } as any;
    }
    if (typeof CanvasRenderingContext2D === 'undefined') {
        globalThis.CanvasRenderingContext2D = { prototype: {} };
    }
}
export {};

სიმი უზრუნველყოფს ყველაფერ საჭირო ნაპრალ ინფორმაციასა და ცვლადებს, რომლებიც საჭიროა გაშვებისათვის, მაგრამ ვვარაუდობ, რომ ეს ბილდზე არ აქვს მნიშვნელობა. შემდეგ ვცადე pixi.js-ის დინამიურად იმპორტი onMount-ის დროს კოდის შიგნით შემდეგნაირად:

<script lang="ts">
    import '$utils/pixi-ssr-shim';
    import { onMount } from 'svelte';
    import App from './utils/App';
    import { run } from './seating-chart';

    let el: HTMLDivElement;

    onMount(async () => {
        //@ts-ignore
        const PIXI = await import('pixi.js');

        run(el, PIXI);

        window.addEventListener('resize', () => {
            App.app.destroy(true);
            App.app = null;
            App.viewport = null;

            run(el, PIXI);
        });
    });
</script>

<div class="flex items-center justify-around">
    <div bind:this={el} />
</div>

მე ასევე ვცადე ჩემსივე pixi.js პაკეტის შექმნა ისე, როგორც pixijs.io/customize აკეთებს, და ეს მხოლოდ კიდევ ერთ პრობლემას იწვევს, რომლის მოგვარება მე არ მინდოდა.

ასე რომ, მე არ მაქვს იდეა, რას ვაკეთო ეს გამოსასწორებლად, იმიტომ რომ ვერ გავაპარებ შეცდომას და ვერ ვმართავ პროგრამას.

პასუხი #1

ეს ფაქტიურად გამოწვეული იყო იმით, რომ pixijs-ის კოდში გამოყენებული იყო self, და როდესაც sveltekit კომპილატორი ანალიზირებს მას, გამოითხოვება შეცდომა, რადგან nodejs-ს არ აქვს self როგორც ცვლადი. მე მოვაგვარე ეს პრობლემა და მივიღე pull request pixijs-ის მთავარ ბრენჩში, რომელიც გამოვა ვერსიაში 6.3.0.

აი PR: https://github.com/pixijs/pixijs/pull/8050

პასუხი #2

არ ვიცი, ეს დაკავშირებული იქნება თუ არა, მაგრამ მე დავამატე Pixi ჩემს Svelte პროექტში (საწყისი ოფიციალური Svelte შაბლონის საფუძველზე, რომელიც იყენებს rollup) და მე დავიწყე ამ შეცდომის მიღება:

ReferenceError: url$1 is not defined

ეს მოდიოდა ჩემი პაკეტიდან „ყველა მხრივ“ და არ მიუთითებდა კონკრეტულ შეცდომის წერტილზე.

რამდენიმე ძიების შემდეგ აღმოვაჩინე, რომ ჩემი resolve პლაგინის პარამეტრებში rollup.config.js-ში preferBuiltins: false პარამეტრის დამატებამ საკითხი მოაგვარა (სადაც resolve არის იმპორტი @rollup/plugin-node-resolve პლაგინიდან).

ამრიგად, rollup.config.js-ში:

import resolve from "@rollup/plugin-node-resolve";

export default {
  ...
  plugins: [
    resolve({
      ...
      preferBuiltins: false,
      ...
    })
  ]
  ...
}