ReferenceError: window 未在 NextJs 上定義

Question

嘗試從“react-facebook-pixel”導入 ReactPixel； 但是當我拋出一個參考錯誤時，說 window 沒有定義。

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