2

使用 Next-Urql 和 React-Pixi 时，我不断收到此错误。我知道这是因为 React-Pixi 需要 WEB API。

服务器错误

ReferenceError: self is not defined 生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。

这是我的代码：

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

我知道我应该使用动态渲染，但是当我这样做时，我不断收到错误。

4

1 回答 1

3

我猜你正在使用 Next.js，因为self它在服务器端globalThis MDN上不可用

您可以在react pixi repo上找到相关问题。据说可以试试import no 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 />
  ...
)
于 2022-02-17T01:30:06.790 回答