Ever since I tried protected routes with this on login.js

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

and this on edit.js

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

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

I can no longer build it... the error was:

the window is not defined

Though locally it runs fine. Everything works.

Then I tried this on gatsby-node.js after research

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

};

and the error now is:

WebpackError: TypeError: isRedirect is not a function

I have no idea what to do...

Here is the repo, if it's to any help.

Thank you in advance for your time.

CodePudding user response：

You need to wrap your Firebase use and initialization inside the following condition:

if(typeof window !== 'undefined')

You have multiple instances of Firebase triggered in the SSR (Server-Side Rendering.

Applied in your escritos.js:

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

The same applies to index.js (line 31) and so on...

The references that are inside a useEffect hook (with empty deps, []) should work without the window condition since they are triggered on the DOM tree is loaded, so won't break the SSR. If the error persists, try also wrapping them.