updating to react-scripts 5 leads to TypeError, not able to load "three" classes

[cc-steina]

Describe the bug
Updating react-scripts to Version 5 leads to problems while rendering or even loading in "three" inside lib/cameraTexture.js.
The error "Uncaught TypeError: Class extends value undefined is not a constructor or null" appears in the chrome debug console pointing to line 9 and will cause the whole screen to be white.
Using this setup with react-scripts 4 works without a problem but fails on version 5.
I have created a test repository to give you a better overview here: https://github.com/cc-steina/react-three-fiber-react-scripts-broken as you can see in the actions the build also works fine, it is just a problem when viewing it in the browser.

To Reproduce
Steps to reproduce the behavior:

1. Install Nodejs version 18.6.0
2. git clone https://github.com/cc-steina/react-three-fiber-react-scripts-broken
3. cd react-three-fiber-react-scripts-broken
4. npm i
5. npm start
6. If the browser does not automatically go to https://localhost:3000/
7. Press Shift + ctrl + i to open the Chrome console which will display the bugg

Expected behavior
The Canvas should not cause a white screen when trying to render it.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 103.0.5060.114

[nyan-left]

Hi @cc-steina,

Thanks for the report.

The solution is to add cjs to react-rewired config exclude as noted here: facebook/create-react-app#12021 (comment)

The canvas is also white as you're not rendering anything inside of it. I've opened a PR on your repo which fixes the react-scripts 5 issue as well as adds a ZapparCamera :)

Let me know if I can close this issue.

[cc-steina]

Thank you so much that fixed it instantly! Keep up the great work!

[nyan-left]

No worries! 🙂

[cc-steina]

Sorry about reopening the issue but it seems like the upgrade does break something inside the InstantTracker, or the Camera.
I have added a new commit to the test project from above to test it.

When a state value in the function above the declaration of the file containing the Zapworks Components is being changed, which forces a rerender, the camera freezes completely.
Which is weird because animations that are ThreeJS based will still work and will play if called, I have not included an example for that because I don't have a model at hand that I'm allowed to share in this manner.
I assume that this is also related to react-scripts v5 since the same code works flawlessly with react-scripts version 4.

Is there some advanced logging that can be enabled maybe? The camera freeze doesen't throw any errors on the command line or in the chrome debugger console. The logs on the phones are empty too, no error messages, no warnings.

[nyan-left]

Interesting, taking a look now.

Here's how to set the log level:
https://github.com/zappar-xr/zappar-react-three-fiber/blob/master/tests/jest/module/_template0_simple-face.tsx#L9

[nyan-left]

From the logs, looks to me like the camera is being re-rendered, causing things to freeze. Memo'ing it should take care of that:
cc-steina/react-three-fiber-react-scripts-broken#2

test url: https://nyan-left.github.io/react-three-fiber-react-scripts-broken/

[cc-steina]

Awesome that did the trick and it also fixed another issue that we had: The object scaling larger and smaller based on how close or far you try to get to it, I guess it was also connected to this. It probably updates every other time if the Camera is not Memo'd and because of that recalculating positions and/or scaling. Now it is tracking steady as a rock on the same underground! Thank you so much for your help!

[nyan-left]

Great! Best of luck with the project 🙂