Webpack development mode freezes browser

[MDransfeld]

With mode: 'development' in the webpack config using even an empty <Canvas/> freezes the browser tab.

Stopping Javascript execution in the development tools shows that react-reconciler is stuck in an endless loop with this error message: TypeError: Cannot set properties of undefined (setting 'getCurrentStack') at resetCurrentFiber

Workaround:

• With `mode: 'production' in webpack everything works as expected.
• With an older version of react-three-fiber (5.3.22) development mode works fine

Used versions:

• @react-three/fiber: 7.0.15
• Webpack: 5.50.0

[joshuaellis]

This sounds like a very specific issue with webpack / r3f. Although i use the pair often and haven't come across this. Can you please provide a minimal reproduction of the issue? I imagine it'll have to be a repo as opposed to a sandbox.

[MDransfeld]

I also found this Issue which seems to be exactly the same problem: diegomura/react-pdf#336. Might be only an issue when using React lazy loading.

I will prepare an repo with an minimal example.

[MDransfeld]

This bug seems to only happen when using webpack module federation. I created a simple example to reproduce this: https://github.com/MDransfeld/r3f_webpack_bug.

Starting host and app2 in production mode (yarn build && yarn serve) and app1 (contains the r3f code) in development mode (yarn serve) freezes the browser tab.

[GruFFix]

did you solve the problem?

[drcmda]

making this a discussion for now to create more space for direct r3f bugs. this has to be a webpack issue.