three and web are incompatible

[maciossek]

🐛 Bug Report

react-spring/web is not working when a @react-spring/three happens before, unless both is happeing in the same file. From here on this is just wild guessing from my side why this happens.

I am using react spring for a web and a threejs context. Respectivly importing both with

import { animated, useTransition, config, useSpring } from "@react-spring/web";
// or
import { useSpring, animated, config } from "@react-spring/three";

To Reproduce

Import a animated three component and a animated web component. The useSpring web component stops working:

Expected behavior

Importing react-spring/three and react-spring/web both enable working springs no matter if imported from different files.

Link to repro (highly encouraged)

Working animations: https://codesandbox.io/s/single-file-69el5?file=/src/App.js
Non Working example: https://codesandbox.io/s/multi-file-11oph?file=/src/App.js

Environment

• react-spring v9.2.3
• react v17.0.2

[joshuaellis]

Hm this is probably from the global side effect of importing anything from the animated file of @react-spring/three.

For some context we make @react-three/fiber control the rendering loop for three animated components because then it also works in XR see #1518. So the workaround would be to do:

Globals.assign({
  frameLoop: 'always',
})

which would then mean that our rafz package which uses the native requestAnimationFrame is running the render loop removing the r3f need.

If you have an idea on how to resolve this i'd be more than happy to hear it and talk through it more!

[ThomasRutzer]

Hi @joshuaellis, when I use your suggested solution, would that mean that I might overwrite r3f Canvas setting frameloop as well?

[maciossek]

So I updated to the latest packages and tried it out today. The issue remains while your workaround works well:

import { Globals } from "@react-spring/shared";

Globals.assign({
  frameLoop: "always",
});

If someone is looking for a copy-paste solution.

Can I suppress the warning from react-spring-rafz somehow? Cannot call the manual advancement of rafz whilst frameLoop is not set as demand is spamming my sonsole.

[ThomasRutzer]

hm, I am still unsure what Globals.assign({ frameLoop: "always" }) means. Let's say, I have a hybrid app with a HTML part and a Canvas part. And at some point I want to stop the Canvas from render like suggested here but animate some HTML ui instead with react-spring.
If I'd copy-paste the above solution, would that mean I'd implicitly re-force my Canvas to jump into the render loop again? Or is the same property naming just some coincidence?

[maciossek]

Hm, even if I import the stuff from the core package, the issue remains:

https://codesandbox.io/s/multi-file-11oph

Maybe is is some sort of issue with webpack or lazy loading?

[joshuaellis]

Currently the "offending code" is in the global space, so importing @react-spring/three at all into the project which you're doing regardless of using the component or not causes the block.

[marceloavf]

So I updated to the latest packages and tried it out today. The issue remains while your workaround works well:

import { Globals } from "@react-spring/shared";

Globals.assign({
  frameLoop: "always",
});

If someone is looking for a copy-paste solution.

Can I suppress the warning from react-spring-rafz somehow? Cannot call the manual advancement of rafz whilst frameLoop is not set as demand is spamming my sonsole.

Did you manage to suppress the console warn?
It works for me, but it's being hard to watch the console.

[maciossek]

@marceloavf no, sorry. I haven't checked for a solution tbh. A quick search led me to console-suppress. As this is just a single view in my app I don't mind too much.

[marceloavf]

I'm having a bug now that the Global.assign dont have any effect when theres multiple springs on the same page as the three fiber component, so it stops working when navigating between pages 😢

Actually, the global code to change the frameloop is in my app.js file, on nextjs, should it be somewhere else?

I've seen also that it works when the canvas is in the same page of the spring animation, maybe make the canvas global and use it between pages should be a workaround?

[jorgenbuilder]

I ran into this issue today, and the Globals.assign({ frameLoop: "always", }); fix works in my case. However, it was quite difficult to spot because the issue occurs without any kind of exception or traceback. I ended up removing code all over my app until narrowing it down to this issue--not the kind of bug resolution path I prefer to follow 😆. Should we consider adding an exception or warning of some kind, until a deeper solution can be found?

[joshuaellis]

I ran into this issue today, and the Globals.assign({ frameLoop: "always", }); fix works in my case. However, it was quite difficult to spot because the issue occurs without any kind of exception or traceback. I ended up removing code all over my app until narrowing it down to this issue--not the kind of bug resolution path I prefer to follow 😆. Should we consider adding an exception or warning of some kind, until a deeper solution can be found?

If you want to put a PR proposal together for what that might look like i'd be happy to take a look and steer!

[Lorenz-N]

It seems the issue was introduced somewhere between @react-spring/three@^9.3.1 and @react-spring/core@~9.4.0 until now. Using those versions (which seem to be still used by the latest @react-three/drei for some reason) works perfectly. The animations are working and there's no log spam by rafz.

I haven't mixed it with @react-spring/web yet, but I guess this issue is mainly related to the "three" part.

[joshuaellis]

leaving as a note to myself, the solution would probably be around how we create hosts in each target and how that then integrates with our Globals.

[rogersanick]

I just upgraded versions on React-Spring, React-Three-Fiber and Three.js. Encountered this issue but was able to resolve with the specified work around. Funny enough, it did not show up locally but DID show up when deployed. Thanks for the fix!

[xiaotianxt]

I still have the Cannot call the manual advancement of rafz whilst frameLoop is not set as demand issue, which can be reproduced here.

[dswhy]

I'm still having this problem as well, I get the warning and the animation doesn't work. I only use one spring and only for Three and not for web. I am using gsap and threeJS animations, but disabling them doesn't seem to cancel the error.

[craigmhughes]

@xiaotianxt I checked out your example after coming across this problem myself. It looks like the following suggestion may apply to you too as you're using drei (#1889 (comment))

[steelx]

hi,
Im also facing this issue with react-three. and none of the animated work.

but using this fixes the animation, but I dont even know what it is for.
but console warn persists like before

index.js:1 Cannot call the manual advancement of rafz whilst frameLoop is not set as demand

import { animated, Globals, useSpring } from "@react-spring/three";

Globals.assign({
	frameLoop: "always",
});

...
const [hovering, setHovering] = useState(false);
	const handleClick = () => setHovering((s) => !s);
	const { size, y } = useSpring({
		size: hovering ? 10 : 1,
		y: hovering ? 10 : 0,
	});

return (
<animated.mesh
		position={[2, 1, 2]}
		onClick={handleClick}
		scale={size}
	position-y={y}
>
		<boxGeometry />
		<meshStandardMaterial color="red" />
</animated.mesh>

)

[laffan]

The above fix does not seem to work when using the most recent versions of drei (9.64.0) and react-spring(9.7.1). Does anyone have a way of using these libraries together? @craigmhughes do you have a workaround that works?

[skrat]

@laffan Drop the dependency on spring, drei already depens on it (https://www.npmjs.com/package/@react-three/drei?activeTab=dependencies) and having multiple version causes this issue.

[laffan]

Thanks @skrat - For some reason I had tried that and it wasn't working, but once I deleted node_modules and reinstalled it works great.

[GibsDev]

The Globals workaround seems to work for me, but the console warning is still occurring. Has there been any more progress on an official fix for this?

To add more context here, I only ran into this as a problem when I migrated my fiber/spring project from it's own repository to a monorepo. It worked perfectly fine without the workaround in it's own repository. I just can't seem to narrow down which packages/versions are causing the issue though.

Here is the package.json of the isolated repo where I do not require the workaround:

package.json

{
  "name": "r3f-playground",
  "version": "1.0.0",
  "dependencies": {
    "@babel/core": "^7.24.0",
    "@babel/preset-env": "^7.24.0",
    "@babel/preset-react": "^7.23.3",
    "@react-spring/three": "^9.7.3",
    "@react-three/drei": "^9.102.6",
    "@react-three/fiber": "^8.15.19",
    "axios": "^1.6.8",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.10.0",
    "html-webpack-plugin": "^5.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.72.0",
    "sass-loader": "^14.1.1",
    "three": "^0.162.0",
    "webpack": "^5.90.3",
    "webpack-bundle-analyzer": "^4.10.1",
    "webpack-cli": "^5.1.4"
  },
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --mode development"
  },
  "devDependencies": {
    "webpack-dev-server": "^4.15.1"
  }
}

I still run into this problem even if I use all the same versions from above in my monorepo. Although I'm not exactly sure how to check what versions are actually being used. And I can't generate a fresh package-lock.json in the monorepo.

Also a very strange side effect of the workaround is that the stats panel is showing half the framerate (120 vs 240). So I'm not sure what's up with that.

I can still get the maximum frame rate when moving around my camera, but any frame invalidations caused by animations seem to be capped at half the normal rate. This also happens at 30/60 fps.

---

Progress update:

The difference seems to be
"@react-three/fiber": "8.15.19"
"@react-three/fiber": "8.16.1"

Still looking into this.