Gatsby构建时错误- WebpackError: TypeError: isRedirect不是函数

Question

自从我用这个在login.js上尝试了受保护的路线之后

    <Router basepath="/">
            <PrivateRoute path="/edit" />
        </Router>

edit.js上的这个

useEffect(() => {
    // ... some code here

    getEscritos();
    if (!user && location.pathname !== `/login`) {
        navigate("/login");
        return null;
    }
}, []);

我不能再建造它了。错误是：

窗口未定义为

虽然在当地它运行的很好。一切都正常。

然后我在研究后在gatsby-node.js上尝试了这个

exports.onCreateWebpackConfig = ({ stage, loaders, 
actions, getConfig }) => {
if (stage === "build-html" || stage === "develop-html") {
actions.setWebpackConfig({
  module: {
    rules: [
      {
        test: /reach-router/,
        use: loaders.null(),
      },
    ],
  },
});
externals: getConfig().externals.concat(function (
  context,
  request,
  callback
) {
  const regex = /^@?firebase(\/(.+))?/;
  // exclude firebase products from being bundled, so 
  they will be loaded using require() at runtime.
  if (regex.test(request)) {
    return callback(null, "commonjs " + request); // <- 
   use commonjs!
    }
  callback();
  });
 }

}；

现在的错误是：

WebpackError: TypeError: isRedirect不是函数

我不知道该怎么办..。

这是存储库，如果有什么帮助的话。

提前谢谢你抽出时间。

Answer 1

您需要将Firebase的使用和初始化封装在以下条件中：

if(typeof window !== 'undefined')

在SSR (服务器端呈现)中触发多个Firebase实例。

应用于您的escritos.js

  if(typeof window !== 'undefined'){
    const db = getFirestore(app);
    const escritosColRef = collection(db, "escritos");
  }

同样也适用于(第31项)等等.

useEffect钩子中的引用(带有空的deps，[])应该在没有window条件的情况下工作，因为它们是在DOM树上被触发的，所以不会破坏[]。如果错误仍然存在，也尝试包装它们。