ReferenceError:self不是使用React Pixi和Next urql定义的

Question

我在使用Next Urql和React Pixi时一直收到这个错误。我知道这是因为React Pixi需要WEB API。

服务器错误

ReferenceError:self未定义此错误发生在生成页面。任何控制台日志都将显示在终端窗口。

这是我的代码：

import { Graphics, Stage } from "@inlet/react-pixi";
import { withUrqlClient } from "next-urql";
import { createUrqlClient } from "../../../utils/urqlUtils/createUrqlClient";
import NoSSR from "react-no-ssr";
const edit = () => {
....

return (
<Layout metaTags={metaTags}>
<Flex flexDir="row">
{typeof window !== "undefined" && (
<NoSSR>
<Stage>
<Graphics
draw={(g) => {
g.beginFill(0xff3300);
g.lineStyle(4, 0xffd900, 1);
g.moveTo(50, 50);
g.lineTo(250, 50);
g.lineTo(100, 100);
g.lineTo(50, 50);
g.endFill();
g.lineStyle(2, 0x0000ff, 1);
g.beginFill(0xff700b, 1);
g.drawRect(50, 250, 120, 120);
g.lineStyle(2, 0xff00ff, 1);
g.beginFill(0xff00bb, 0.25);
g.drawRoundedRect(150, 450, 300, 100, 15);
g.endFill();
g.lineStyle(0);
g.beginFill(0xffff0b, 0.5);
g.drawCircle(470, 90, 60);
g.endFill();
}}
/>
</Stage>
</NoSSR>
)}
</Flex>
</Layout>
);
};
export default withUrqlClient(createUrqlClient, { ssr: false })(edit);

我知道我应该使用动态渲染，但当我这样做时，我会不断出错。

Answer 1

我猜你在使用Next.js时说self在服务器端globalThis MDN 上不可用

您可以在react pixi repo上找到相关问题。据推测，您可以尝试不导入SSR Next.js.

// Separate your pixi into a component and import
import dynamic from 'next/dynamic'
const PixiComponentWithNoSSR = dynamic(
() => import('../components/your-pixi-component'),
{ ssr: false }
)
return (
...
<PixiComponentWithNoSSR />
...
)