Page 404 not rendering react when using pathPrefix and redirect
#32142 opened on Jun 28, 2021
Description
Description
This resumes https://github.com/gatsbyjs/gatsby/issues/31504. When a pathPrefix is used and the hosting is configured to redirect from the root domain to the pathPrefix (perfectly reasonable behaviour I think), triyng to load a non-existing page breaks React .
Steps to reproduce
Reproduction was provided in said issue and in related discussion https://github.com/gatsbyjs/gatsby/discussions/31531.
Expected result
The 404 page should be visible and interactive.
Actual result
The 404 page is loaded but React breaks with "Error: page resources for /xxx not found. Not rendering React.", and the page is not interactive (js is broken).
Investigation
I've debugged the issue carefully, and I've traced down the root cause: this line: https://github.com/gatsbyjs/gatsby/blob/2eb57c7a9dfeb64c351e7154849652e235767e1b/packages/gatsby/cache-dir/loader.js#L526 tries to check a resource existence (comment says "check if html file exist using HEAD request: if it does we should navigate to it instead of showing 404"). The error is that the rawPath it's using, is stripped from the pathPrefix. As I can see, this is used because the internal db of fetched resources is normalized, and anywhere else this function is used: https://github.com/gatsbyjs/gatsby/blob/2eb57c7a9dfeb64c351e7154849652e235767e1b/packages/gatsby/cache-dir/loader.js#L27 which adds back the pathprefix. But there the check is done without the pathPrefix, so it calls the incorrect url. This is not usually a problem because it would normally catch another non-existing url, so the result is the same, but with the described hosting behaviour, anything called on the root is redirected on the pathPrefix (with a 302), so this check fails, incorrectly triggering an error.