Uncaught (in promise) Error: page resources for / not found. Not rendering React

[anim8rDev]

Description

I'm trying to use Gatsby with react-spring and react-three-fiber. I'm able to successfully get my example code to work while in develop mode. However, after a build and serving that page, I get an in-browser console error.

**Uncaught (in promise) Error: page resources for / not found. Not rendering React
at production-app.js:128 **

There are no build errors. The problem is not present when I change a.mesh to mesh. That initially led me to believe that this is a React-Spring and or three-fiber problem (and it still may very well be), but after checking issues here, I see other Gatsby users having similar "Not rendering React" errors in the built version and thought it would be wise to check.

Steps to reproduce

Build a project with Gatsby, React-spring/three using <a.mesh>.

Minimal repo:
https://github.com/anim8rDev/meshError

Expected result

No errors and the Canvas properly rendered on the built project (again, it works fine in develop).

Actual result

Error:
**Uncaught (in promise) Error: page resources for / not found. Not rendering React
at production-app.js:128 **

Canvas does not render.

Environment

System:
OS: Windows 10 10.0.18362
CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
Binaries:
Node: 12.14.1 - D:\SOFTWARE\Applications\nodejs\node.EXE
npm: 6.13.4 - D:\SOFTWARE\Applications\nodejs\npm.CMD
Languages:
Python: 3.8.1
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.23.11 => 2.23.11
gatsby-plugin-root-import: ^2.0.5 => 2.0.5
npmGlobalPackages:
gatsby-cli: 2.12.37

[blainekasten]

This took a lot of tracking down.. finally figured it out. The module is throwing an error:

loader.js:368 TypeError: _FrameLoop__WEBPACK_IMPORTED_MODULE_1__.a is not a constructor
    at Module.71bl (globals.js:8)
    at __webpack_require__ (bootstrap:84)
    at Object.<anonymous> (FrameLoop.js:1)
    at Object.dr3n (component---src-pages-index-js-cb68ff9b421ff186b0f0.js:11826)
    at __webpack_require__ (bootstrap:84)
    at Object.F45Q (index.js:1)
    at __webpack_require__ (bootstrap:84)
    at Module.RXBc (component---src-pages-index-js-cb68ff9b421ff186b0f0.js:11135)
    at __webpack_require__ (bootstrap:84)

However I don't totally understand why this is happening yet

[GreenOn]

We are chasing a similar error that says Uncaught (in promise) Error: page resources for / not found. Not rendering React.
It is getting incredibly difficult to know what the problem is. Any clues on how we go about debugging a problem like this?

[stevenkkim]

Like @GreenOn, I am also trying to debug Uncaught (in promise) Error: page resources for /app/ not found. Not rendering React

In my case, /app/ is a client-only route that contains a client-side react app.

I have no problems when I run gatsby develop, but I get the error when running gatsby serve. There are no build errors reported. I read all the comments here #19618 but none have helped.

Any suggestions on how to approach debugging this would be greatly appreciated.

---

UPDATE: I just debugged `Uncaught (in promise) Error: page resources for /app/ not found. Turns out the problems was with react-contextmenu (vkbansal/react-contextmenu#284) which works fine client-side but breaks server-side during the gatsby build process.

My temporary solution for now is to use the compiled version of react-contextmenu in /node_modules/react-contextmenu/dist/react-context-menu.js

So instead of import { ContextMenu, MenuItem } from 'react-contextmenu'; I do import { ContextMenu, MenuItem } from 'react-contextmenu/dist/react-contextmenu';.

The way I debugged this was by removing all components from my app component, then adding them back one at a time until I found the component that was breaking the build.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[R3coN]

No, I am also facing the same issue and not able to find the solution for it.

[zgababa]

Yes, same here. It happens only in serve mode and when I pass a second time (or refresh) on the index page.
I have to reload with no cache, to see the page again.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[ahmadkhalaf1]

any idea how to solve this?

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[janarosmonaliev]

Solution for @react-spring/module

@ahmadkhalaf1 @zgababa I have tried this solution and it worked for me: pmndrs/react-spring#1069 (comment) .

However, first, make sure you don't have any hidden html-build errors. For example: THREE.FontLoader() would use XMLHttpRequest, which is not available during build and might cause an error. To handle these build errors, just wrap the unavailable module:

if (typeof XMLHttpRequest !== `undefined`) {
new THREE.FontLoader().load("path_to_font.json", (e) => ...)
}

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[seastar-ss]

we have the issue for
"gatsby": "^2.26.1",
"gatsby-plugin-manifest": "^2.12.0",
"gatsby-plugin-react-helmet": "^3.9.0",
"gatsby-plugin-react-redux": "^1.1.0",
"gatsby-plugin-sass": "^3.0.0",
"gatsby-plugin-styled-components": "^4.0.0",
"gatsby-plugin-svgr": "^2.1.0",
"gatsby-source-filesystem": "^2.11.0"

and we have sevaral page without any problem , the problematic one use hash to pass some more information

[LekoArts]

Similarly to #19618 (comment) I'll close this as the original error was fixed as you'll now see a more detailed error. If you can provide a minimal reproduction (https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/) showing that it's an issue with Gatsby v3, please open a new issue. Thanks!