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