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

Question

正如标题所述，当在SvelteKit中使用Pixi.js时，ONLY和ONLY在构建应用程序时，它会吐出一个"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 {};

填充程序提供了运行所需的所有必要的伪信息和变量，但我想这在构建时并不重要。然后我尝试在Mount上动态导入pixi.js，代码如下：

<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

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

以下是PR：https://github.com/pixijs/pixijs/pull/8050

Answer 2

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

ReferenceError: url$1 is not defined

它来自我的包裹"；一般来说"；并没有指出具体的失败点。

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

所以在rollup.config.js:中

import resolve from "@rollup/plugin-node-resolve";
export default {
...
plugins: [
resolve({
...
preferBuiltins: false,
...
})
]
...
}