Page 404 with pathPrefix breaks Not rendering React

[ariadne-github]

Description

When accessing the 404 page on an hosted gatsby site configured with a pathPrefix, the page is visible, but unresponsive, since React breaks.

Steps to reproduce

The issue does not apper locally (with gatsby serve), and I suspect that the problem lies in a particular thing of my hosting configuration. To reproduce locally, just take any gatsby website, add a pathPrefix in gatsby config, build it with "--prefix-paths", and then host it with this script (where "path_prefix" is your configured pathPrefix):

const path = require('path');
const express = require('express');
const app = express();

app.use('/path_prefix', express.static('public'));
app.use('/path_prefix/*', (req, res) => {
  res.status(404);
  res.sendFile(path.join(__dirname, './public', './404', '/index.html'));
});
app.use('/*', (req, res) => {
  res.redirect('/path_prefix/');
});

app.listen(9000);

The particular thing is that this script redirects from the root to the pathPrefix, which mirrors my hosting configuration.

Expected result

Accessing the 404 page should display it correctly without errors.

Actual result

The page displays correctly, but the javascript breaks with the message: "Error: page resources for /path_prefix/xxx not found. Not rendering React".

Environment

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
Binaries:
Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.8
Browsers:
Chrome: 90.0.4430.212
Edge: Spartan (44.19041.964.0), Chromium (90.0.818.62)
npmPackages:
gatsby: ^3.0.1 => 3.0.4
gatsby-plugin-csp: ^1.1.3 => 1.1.3
gatsby-plugin-image: ^1.0.0 => 1.0.1
gatsby-plugin-manifest: ^3.0.0 => 3.0.0
gatsby-plugin-preact: ^5.0.0 => 5.0.0
gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
gatsby-plugin-react-helmet-canonical-urls: ^1.4.0 => 1.4.0
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
gatsby-plugin-sass: ^4.0.0 => 4.0.2
gatsby-plugin-schema-snapshot: ^2.0.0 => 2.0.0
gatsby-plugin-sharp: ^3.0.0 => 3.0.1
gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
gatsby-source-contentful: ^5.0.0 => 5.0.3
gatsby-source-filesystem: ^3.0.0 => 3.0.0
gatsby-transformer-json: ^3.0.0 => 3.0.0
gatsby-transformer-remark: ^3.0.0 => 3.0.0
gatsby-transformer-sharp: ^3.0.0 => 3.0.0
gatsby-transformer-yaml: ^3.0.0 => 3.0.0
npmGlobalPackages:
gatsby-cli: 3.5.0

Investigation

I created this reproduction by observing the differences with local and remote hosted versions of my website, and I've found that gatsby makes an HEAD call to http://localhost:9000/xxx (instead of http://localhost:9000/path_prefix/xxx). This call would return 404 on standard gatsby serve, but gets a 302 on my configuration.
I think that gatsby checks the wrong url to check whether to display the 404 page. In any case this call is just wrong: if I configure a pathPrefix, nothing shoud be called in the domain root.

[vladar]

Can you share a link to the live site where this is observed? And ideally a reproduction repo?

[ariadne-github]

I made a reproduction repo: https://github.com/ariadne-github/gatsby-starter-default/tree/gatsby-31504. It's just the gatsby starter with the instructions I've already provided for the hosting. Just run:

npm run build
npm run serve

And go to http://localhost:9000.
You'll be redirected to http://localhost:9000/path_prefix/, which is the desired behaviour in my hosting environment.
Then just hit http://localhost:9000/path_prefix/anything, and you'll see the error in console.

[ariadne-github]

@vladar Have you been able to try my reproduction?

[wilderedin5]

I have same problem. Its fine work in development, but throw error in build.
Error: page resources for /templates/xxx not found. Not rendering React

This error appear after migrate to v3.

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/templates/)) {
    page.matchPath = '/templates/*'
    createPage(page)
  }
}

[wilderedin5]

Sorry, i'm tight :) My problem is resolved. Problem was in enabled property "enableServerRouting" in plugin @vtex/gatsby-plugin-performance. I disable this property, after, my problem is disappear.