React-Spring v9 with three fiber has errors when used with Gatsby

[anim8rDev]

🐛 Bug Report

First things first. I'm not sure if this bug has to do with me, Spring, Three Fiber, or Gatsby itself. Hopefully someone with more intimate knowledge will have a better idea.

---

I'm trying to use react-spring (v9) and react-three-fiber with Gatsby. The reduced example will work while in Gatsby development mode. However, as soon as I build the project, 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 error seems to occur with the use of <a.mesh>. As soon as replace with "mesh", it will build and run without errors. It may also be important to note that if I switch to react-spring v8, everything works fine. (I need to use v9 for other reasons)

To Reproduce

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

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

Expected behavior

No errors in browser console and able to see canvas with mesh object.

Link to repro (highly encouraged)

https://github.com/anim8rDev/meshError

Environment

"@react-spring/core": "^9.0.0-rc.3",
"@react-spring/three": "^9.0.0-rc.3",
"@react-spring/web": "^9.0.0-rc.3",
"react-three-fiber": "^4.2.12",
"three": "^0.118.1"
"react": "^16.12.0",
"gatsby": "^2.23.11",

[michaelcuneo]

I'm having the same issue, but it's a webgl error... I have been trying to revert back to an earlier version of react-spring/three with no luck... it continues to demand 9.0.0-rc3.

[michaelcuneo]

I had to go all the way back to three 0.112.3 for this to function. Not sure why.

[andreademasi]

Adding this piece of code in gatsby-node.js did the trick for me:

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith("build-javascript")) {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-spring/,
            sideEffects: true
          }
        ]
      }
    })
  }
}

[cxspxr]

Another workaround which worked for me would me using patch-package and creating following patches for all the @react-spring packages you have e.g.:@react-spring/animated, @react-spring/core, @react-spring/shared, @react-spring/three etc.

And you should end up having patches for all of them that looks like that:

diff --git a/node_modules/@react-spring/animated/package.json b/node_modules/@react-spring/animated/package.json
index 49fb055..0b9df06 100644
--- a/node_modules/@react-spring/animated/package.json
+++ b/node_modules/@react-spring/animated/package.json
@@ -65,7 +67,7 @@
     "access": "public"
   },
   "react-native": "src/index.ts",
-  "sideEffects": false,
+  "sideEffects": true,
   "types": "index.d.ts",
   "version": "9.0.0-rc.3"
 }

though the @andreademasi solution is leaner I guess

[janarosmonaliev]

@andreademasi 's solution worked for me too. Just make sure that there are no html build errors (e.g. on use of THREE.FontLoader(), etc.) and the solution fix the problem.

[joshuaellis]

closing due to inactivity. please use discussions or discord if you want more help or please consider creating a PR if you want to add a feature 😄