Search code examples
webpackbuildgatsbyreach-router

Gatsby build time error - WebpackError: TypeError: isRedirect is not a function


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.


Solution

  • 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.