typescript - Pixi.js SvelteKitissä antaa 'self is not defined' -virheen vain käännöksen aikana

Kuten otsikko kertoo, kun käytetään Pixi.js:ää SvelteKitissä, VAIN ja ainoastaan sovellusta rakennettaessa se antaa "self is not defined" -virheen, ja se jäljittää virheen @pixi/settings -moduuliin. Olen yrittänyt kaikkia mahdollisia keinoja, jotka tiedän tämän korjaamiseksi. Ensin käytin shimia antamaan sille jotain simuloitua tietoa, mutta se ei toiminut:

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 antaa kaikki tarvittavat dummy-tiedot ja muuttujat, joita tarvitaan ajamiseen, mutta oletan, ettei sillä ole merkitystä käännöksessä. Sitten yritin tuoda pixi.js:n dynaamisesti onMountin sisällä koodissa näin:

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

Yritin myös luoda oman pixi.js-pakettini samalla tavalla kuin pixijs.io/customize tekee, mutta se aiheutti vain toisen ongelman, jonka kanssa en jaksanut vaivautua.

Joten minulla ei ole aavistustakaan, mitä tehdä tämän korjaamiseksi, koska en voi vain ohittaa virhettä ja suorittaa ohjelmaa.

Vastaus #1

Tämä johtui itse asiassa siitä, että pixijs-koodissa oli käytetty self-kohtaa, ja kun sveltekit-kääntäjä analysoi sitä, se antaa virheen, koska nodejs:llä ei ole self-muuttujaa. Olen korjannut tämän ongelman ja luonut pull requestin pixijsin päähaaraan, joka julkaistaan versiossa 6.3.0.

Tässä on PR: https://github.com/pixijs/pixijs/pull/8050

Vastaus #2

En ole varma, onko tämä liittyvää, mutta lisäsin Pixin Svelte-projektiini (perustuen viralliseen Svelte-aloitusmalliin käyttäen rollupia) ja aloin saada tämän virheen:

ReferenceError: url$1 is not defined

Se tuli nipustani 'yleisesti' eikä viitannut tiettyyn vikaantumiskohtaan.

Jonkin etsinnän jälkeen huomasin, että preferBuiltins: false -asetuksen lisääminen resolve-laajennusasetuksiini tiedostossa rollup.config.js korjasi sen (missä resolve on tuonti @rollup/plugin-node-resolve -laajennuksesta).

Joten rollup.config.js-tiedostossa:

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

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