Gatsby 构建时错误 - WebpackError: TypeError: isRedirect is not a function

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 不是函数

我不知道该怎么办......

这里是repo，如果有帮助的话。

提前感谢您的宝贵时间。

Answer 1

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

if(typeof window !== 'undefined')

您在 SSR 中触发了多个 Firebase 实例（服务器端渲染。

应用在你的escritos.js:

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

同样适用于index.js (line 31) 等等...

useEffect 钩子内的引用（带有空的deps、[]）应该在没有window 条件的情况下工作，因为它们是在加载 DOM 树时触发的，因此不会破坏 SSR .如果错误仍然存​​在，请尝试包装它们。