typescript - Pixi.js v SvelteKit spôsobuje chybu 'self is not defined' iba pri budovaní

Ako názov uvádza, pri používaní Pixi.js v SvelteKit, LEN a LEN počas kompilácie aplikácie sa objaví chyba „self is not defined“ a jej pôvod vedie späť k modulu @pixi/settings. Skúšal som všetky možné spôsoby, ktoré poznám, aby som to opravil. Najprv som použil shim, aby som mu poskytol niektoré fiktívne informácie, ale nepomohlo to:

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 {};

Shim poskytuje všetky potrebné falošné informácie a premenné potrebné na spustenie, ale hádam na zostavení nezáleží. Potom som sa pokúsil importovať pixi.js dynamicky na onMount v kóde takto:

<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>

Skúsil som tiež vytvoriť vlastný balíček pixi.js tak, ako to robí pixijs.io/customize, a to vytvorilo len ďalší problém, s ktorým som sa nechcel zaoberať.

Takže, nemám ani potuchy, čo robiť, aby som to opravil, pretože nemôžem jednoducho obísť chybu a spustiť program.

Odpoveď č. 1

Toto bolo vlastne spôsobené tým, že kód pixijs použil self vo svojom kóde a keď ho kompilátor SvelteKit analyzuje, vyskytne sa chyba, pretože Node.js nemá premenú self. Tento problém som opravil a vytvoril pull request do hlavnej vetvy pixijs, ktorý bude vydaný vo verzii 6.3.0.

Tu je PR: https://github.com/pixijs/pixijs/pull/8050

Odpoveď č. 2

Nie som si istý, či to súvisí, ale do môjho Svelte projektu som pridal Pixi (na základe oficiálneho Svelte štartovacieho šablónu s použitím Rollupu) a začal sa mi zobrazovať tento chybový hlásenie:

ReferenceError: url$1 is not defined

Vyplývalo to z môjho balíka „vo všeobecnosti“ a neukazovalo na konkrétny bod zlyhania.

Po niekoľkých pátraniach som zistil, že pridanie nastavenia preferBuiltins: false do mojich nastavení pluginu resolve v rollup.config.js to opravilo (kde resolve je import z pluginu @rollup/plugin-node-resolve.

Takže v rollup.config.js:

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

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