Static site builds fail when running with client-side error TypeError: Cannot redefine property: _currentRenderer

[ivyroot]

I took the following steps to build the example site and export it as a static site:

yarn create r3f-app next my-app cd my-app npm run-script dev ==> site works fine when browsing to localhost:3000 npm run-script export then http-server out (after first npm installing http-server globally)

When viewing the page there is a client-side error:

"Application error: a client-side exception has occurred (see the browser console for more information)."

Console output looks like this:

framework-3583eef75b58b7b2.js:1 TypeError: Cannot redefine property: _currentRenderer
    at Function.defineProperties (<anonymous>)

[maxsilvaweb]

Yes I also have this problem. When deploying to Vercel it also shows this error message.

Application error: a client-side exception has occurred (see the browser console for more information).

Did you get anywhere with this @ivyroot?

[ivyroot]

@maxsilvauk i was not able to resolve this issue in my project. Instead I made a fresh template made with Create React App, added a Canvas element in there as per the R3F docs here: https://docs.pmnd.rs/react-three-fiber/getting-started/your-first-scene#setting-up-the-canvas, then copied the code I wrote into that. Built fine that way.

[maxsilvaweb]

@ivyroot - I would use this instead https://github.com/pmndrs/react-three-next

[skrichten]

+1 ... Same issue for me.

[skrichten]

Downgrading r3f from ^8.8.4 to 8.7.2 fixed this for me

[CodyJasonBennett]

Try updating R3F to latest or upgrading your lockfile and doing a clean install. This is related to https://github.com/pmndrs/react-three-fiber/issues/2533 which is fixed in newer patches.

[RenaudRohlinger]

This issue should be fixed with the latest r3f version thanks @CodyJasonBennett