After building my React app with react-snap and serving the build files, I am running into a problem navigating directly to a certain route (i.e. localhost:3000/path) that uses react-three-fiber/drei to load a GLTF model. The page goes blank and I get the following error:
A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
as well as various TypeErrors from react-three-fiber.esm.js.
However, the page loads properly if I were to start from a different page and navigate to the problem path.
I am not sure what to wrap with startTransition. The only thing I can think is some code in componentDidMount() but nothing is relying on any input. Here is my suspended component:
<Suspense fallback={<Fallback />}>
<Canvas adjustCamera camera={{ position: [0, 0, -3] }}>
<ambientLight />
<Model />
<OrbitControls
...
/>
</Canvas>
</Suspense>
and here is the model:
function Model() {
const gltf = useLoader(GLTFLoader, sceneUrl);
return (
<Suspense fallback={<br></br>}>
<primitive object={gltf.scene} position={[0, -0.5, 0.75]}></primitive>
</Suspense>
);
}
This error does not occur in development when I am just testing in my browser with npm start.
Any ideas as to why this is happening and how to fix?
