ReferenceError：NextJs 上未定义窗口

Question

尝试从“react-facebook-pixel”导入ReactPixel；但是当我这样做时，它会抛出一个引用错误，指出窗口未定义。

 module.exports = require("react-facebook-pixel");

是我导入 ReactPixel 时出现问题的特定代码行。

Answer 1

我猜你正在导入 facebook-pixel ，就好像它在客户端运行而不是 ssr （这是 NextJS ）。一旦您的组件加载到客户端，您将需要动态重要：

https://github.com/zsajjad/react-facebook-pixel/issues/53

使用 useEffect 之一：

  React.useEffect(() => {
    import("react-facebook-pixel")
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init(constants.siteMeta.FacebookPixelID);
        ReactPixel.pageView();

        Router.events.on("routeChangeComplete", () => {
          ReactPixel.pageView();
        });
      });
  });

或者 componentDidMount()

export default class App extends NextApp {
  componentDidMount() {
    import('react-facebook-pixel')
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init('your-pixel-id');
        ReactPixel.pageView();

        Router.events.on('routeChangeComplete', () => {
          ReactPixel.pageView();
        });
      });
  }
}