typescript - Pixi.js em SvelteKit dá um erro 'self não está definido' apenas durante a compilação

Como o título indica, ao usar Pixi.js no SvelteKit, SOMENTE e apenas durante a construção da aplicação, ele irá gerar um erro "self is not defined", e isso remete ao módulo @pixi/settings. Eu tentei todas as formas possíveis que conheço para resolver isto. Primeiro usei um shim para lhe fornecer algumas informações fictícias, mas isso não funcionou:

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

O shim fornece todas as informações e variáveis falsas necessárias para funcionar, mas eu acho que isso não importa na compilação. Depois tentei importar pixi.js dinamicamente no onMount dentro do código assim:

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

Também tentei criar o meu próprio pacote de pixi.js tal como o pixijs.io/customize faz, e isso só cria outro problema com o qual não me quis incomodar.

Então, não faço ideia do que fazer para resolver isto, porque não posso simplesmente contornar o erro e executar o programa.

Resposta #1

Isto foi na verdade causado pelo código do pixijs ter usado self no seu código e quando o compilador do sveltekit o analisa, dá erro porque o nodejs não tem self como variável. Eu corrigi este problema e criei um pull request para o ramo principal do pixijs que será lançado na versão 6.3.0.

Aqui está o PR: https://github.com/pixijs/pixijs/pull/8050

Resposta #2

Não tenho a certeza se isto está relacionado, mas adicionei o Pixi ao meu projeto Svelte (baseado no modelo oficial de arranque do Svelte usando rollup) e comecei a receber este erro:

ReferenceError: url$1 is not defined

Vinha do meu pacote "em geral" e não apontava para um ponto específico de falha.

Depois de alguma pesquisa, descobri que adicionar a configuração preferBuiltins: false às minhas definições do plugin resolve no rollup.config.js resolveu o problema (onde resolve é a importação do plugin @rollup/plugin-node-resolve.

Então, em rollup.config.js:

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

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