Gatsby: App Error On Production 404 page with react-dom ensure-resources error

[Undistraction]

Description

I have a custom 404 page at /404. I can view this successfully in development. However on production, navigating to a non-existent page results in the page loading, but with all links and any components non-functional (For example there is a mailing list signup component in the footer which does not function). This includes links on the page and within the header and footer which are provided by my template.

Clicking on any link does change the URL in the URL bar, but no navigation takes place.

The following error is displayed in the console on page load:

Uncaught Error: Missing resources for /blah
    at t.n.render (ensure-resources.js:135)
    at ci (react-dom.production.min.js:163)
    at ui (react-dom.production.min.js:162)
    at pi (react-dom.production.min.js:169)
    at Ki (react-dom.production.min.js:204)
    at Gi (react-dom.production.min.js:205)
    at Na (react-dom.production.min.js:220)
    at Oa (react-dom.production.min.js:219)
    at Sa (react-dom.production.min.js:216)
    at Zi (react-dom.production.min.js:214)

The path to 'ensure-resources.js' is webpack:///./.cache/ensure-resources.js

Steps to reproduce

I cannot share the URL unfortunately as this is not public yet.

Expected result

• No error should be thrown.
• Nav on the 404 page should work exactly as any other page.

Actual result

• Error is thrown from react-dom's ensure-resources
• Site navigation is completely broken.

Environment

  System:
    OS: macOS 10.14.2
    CPU: x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.7.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  npmPackages:
    gatsby: ^2.0.107 => 2.0.107
    gatsby-cli: ^2.4.5 => 2.4.5
    gatsby-image: ^2.0.20 => 2.0.20
    gatsby-link: ^2.0.9 => 2.0.9
    gatsby-plugin-catch-links: ^2.0.8 => 2.0.8
    gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3
    gatsby-plugin-favicon: ^3.1.2 => 3.1.4
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.8
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.0.10 => 2.0.10
    gatsby-plugin-netlify-cms: ^3.0.9 => 3.0.9
    gatsby-plugin-node-fields: ^2.0.1 => 2.0.1
    gatsby-plugin-page-creator: ^2.0.4 => 2.0.4
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2
    gatsby-plugin-remove-trailing-slashes: ^2.0.5 => 2.0.5
    gatsby-plugin-sharp: ^2.0.13 => 2.0.13
    gatsby-plugin-slug: ^1.0.1 => 1.0.1
    gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
    gatsby-plugin-svgr: ^2.0.1 => 2.0.1
    gatsby-react-router-scroll: ^2.0.1 => 2.0.1
    gatsby-remark-component: ^1.1.3 => 1.1.3
    gatsby-remark-copy-linked-files: ^2.0.6 => 2.0.6
    gatsby-remark-embed-video: ^1.4.0 => 1.4.0
    gatsby-remark-images: ^3.0.1 => 3.0.1
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1
    gatsby-remark-responsive-iframe: ^2.0.6 => 2.0.6
    gatsby-remark-smartypants: ^2.0.6 => 2.0.6
    gatsby-remark-unwrap-images: ^1.0.1 => 1.0.1
    gatsby-source-filesystem: ^2.0.8 => 2.0.8
    gatsby-transformer-json: ^2.1.5 => 2.1.5
    gatsby-transformer-remark: ^2.1.12 => 2.1.12
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8
  npmGlobalPackages:
    gatsby-cli: 2.0.0-beta.13

[sidharthachatterjee]

@Undistraction Could you maybe try to make a minimal reproduction of this from your private repository? I'm happy to take a look once I can reproduce this

[Undistraction]

@sidharthacgatterjee thanks. Yes I'll try and make a repro tomorrow. Was hoping it might be something obvious.

[thinkocapo]

I think I have same or similar issue, and I'm only using the starter app - no code modifications. Doing this because I was creating my own app and that threw errors, so decided I should make sure the native example works. Hmm.
I did:

gatsby build
gatsby serve

then I went to localhost:9000 and got:

:9000/component---src-pages-index-js-ba28a8a52d7efb173845.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
2app-05873d9c14927591ecdc.js:1 Error: Missing resources for /

gatsby develop works fine on localhost:8000

[Undistraction]

@sidharthachatterjee Sorry. Didn't manage to put a repro together and now on holiday for a week. Looks to me like EnsureResources is trying to get resources for a page that doesn't exist (the page which triggered the 404 page will never exist, that is why it triggered the 404 page), and erroring when it can't. It should actually be trying to get resources for the 404 page itself, or at least not trying to get resources for a page that doesn't exist.

[jafstar]

Ditto on the errors

[Undistraction]

This was a really weird one that was actually caused by gatsby-plugin-remove-trailing-slashes. I don't fully understand the exact cause, but it caused other issues as well, including issues with history and the back button. If you are facing similar issues I strongly suggest you rip that sucker out of your project and see if that does it for you.

[alexkirsz]

I'm seeing a similar issue, but nothing is getting reported to the console. Navigating to any 404 from a link within the site works properly, but getting to a 404 from an external link or by tampering with the URL leaves the page in a broken state where navigation only updates the URL but the actual page doesn't get updated properly.

Weirdest part is I can only reproduce this in my production environment on Netlify.

[Undistraction]

@alexkirsz Have you got any redirects set up?

[alexkirsz]

@Undistraction Here's my _redirects file:

/en/*  /en/404/index.html  404
/*  /404/index.html  404

I've created redirects for both these 404 pages in Gatsby. I've also set up a matchPath property on both these pages. I've found this configuration to be the closest to a fully functional i18n setup with support for localised 404.

[Undistraction]

@alexkirsz The reason I ask is because our problem was related to a lack of a trailing slash, not on the error page, but on the page triggering the error page. We are deploying to Apache, and it didn't like the fact that we were using urls /like/this instead of /like/this/.

Sorry I can't be of more help.

[himynameistimli]

@Undistraction / @alexkirsz did either of you have any additional insights / learnings from this issue? It seems to be happening to me as well, but I just disabled gatsby-plugin-remove-trailing-slashes and I removed my lambda@edge function, but I still have the same problem.

[Undistraction]

@himynameitimli tbh we've had so many problems with Gatsby in production that I've rather lost track of what solved which issue.