Gatsby: 404 Flashes Before Showing Correct Page

[jevinsidhu]

I'm trying to have the following route render a page: /tenants/:name.

I wrote this code in gatsby-node.js:

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions;
  if (page.path.includes("tenants")) {
    page.matchPath = `/tenants/:name`;
    createPage(page);
  }
};

This works, however, when I build on Netlify, it returns a 404 error in the console. The page still loads the tenants page, but the 404 page flashes first.

This is not broken in development, just when built.

[jevinsidhu]

I solved this by adding a check in my 404.js for the window. If it's undefined, I don't render the 404 page.

[Yosefc]

Hi,
I just wanted to say thank you for posting this issue. I was struggling with this, until I found this.

[ilyador]

@jevinsidhu can you please share your check code in the 404.js? It's not clear to me what are you checking.

[jevinsidhu]

@ilyador Here's what my 404.js looks like:

const ErrorPage = () => {
  const browser = typeof window !== "undefined" && window;

  return (
    <>
      {browser && (
        <>
            <Heading>Page Not Found</Heading>
            <HomeButton to="/">Go Back to Home</HomeButton>
        </>
      )}
    </>
  );
};