SvelteKit 中的 Pixi.js 仅在构建时给出 'self is not defined' 错误

Question

如标题所述，当在 SvelteKit 中使用 Pixi.js 时，仅在构建应用程序时，它会吐出“self is not defined”错误，并追溯到 @pixi/settings 模块。我已经尝试了所有可能的方法来解决这个问题。首先我用一个 shim 给它一些虚拟信息，但是没有用：


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 提供了运行所需的所有必要的虚拟信息和变量，但我想这对构建无关紧要。然后我尝试在代码中动态导入 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 做的那样，但这只会产生另一个我不会被打扰的问题。

所以，我不知道该怎么做才能解决这个问题，因为我不能只绕过错误和运行程序。

Answer 1

不确定这是否相关，但我将 Pixi 添加到我的 Svelte 项目中（基于使用汇总的官方 Svelte 入门模板），我开始收到此错误：

ReferenceError: url is not defined

它“一般”来自我的包，并没有指出具体的故障点。

经过一些搜索，我发现将 preferBuiltins: false 设置添加到 rollup.config.js 中的 resolve 插件设置中修复了它（其中 resolve 是从 @rollup/plugin-node-resolve插件。

因此 rollup.config.js:

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

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

Answer 2

这实际上是由于pixijs代码在他们的代码中使用了self，当sveltekit编译器分析它时，它出错了，因为nodejs没有self作为变量，我已经修复了这个问题并在将在 6.3.0 发布的 pixijs 主分支中创建了拉取请求。

这是公关： https://github.com/pixijs/pixijs/pull/8050

SvelteKit 中的 Pixi.js 仅在构建时给出 'self is not defined' 错误

Pixi.js in SvelteKit gives a 'self is not defined' error only while building

typescript

pixi.js

sveltekit