react-spring | ✌️ A spring physics based React animation library | Animation library

I think the problem is that you have mixed Material UI version 4 and 5 libraries and they are incompatible with each other. Try replacing @material-ui/core with @mui/core and just remove @material-ui/icons import as you already have @mui/icons-material and use the latest versions of all @mui/* imports.

Clear node_modules before installing dependencies again, to make sure everything is in order and old dependency versions are removed.

EDIT: what turned out to be necessary to solve it in the end - install node v12.22.7, remove node_modules, clean yarn cache and reinstall dependencies

"chart.js": "^3.6.0",

Chart JS, when it has an error, instead of throwing an error message, sometimes it just silently breaks.

I guess storybook had no handle for this odd case and loaded nothing without an error in the console. Which is fine because storybook was not the one with the error, this seems like Chart's fault.

I think we need to wait for 10s once at first. But the delay prop of useSpring makes us wait for 10s at the start of each animation. Because the value of delay is not updating, it is always 10000.

Here we can take a useRef reference to track our initial delay. By checking this we can return a delay of 10000 at first and then 0 for the rest.

In our case we were setting the draco decoder path to:

https://www.gstatic.com/draco/v1/decoders/

by calling:

this.dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");

But their recommended way is specifying the version in the URL:

https://www.gstatic.com/draco/versioned/decoders/1.4.3/

They released a new version yesterday, which explains the sudden errors: https://github.com/google/draco/releases/tag/1.4.3

Changing to the versioned URL fixed it for us. Another fix that worked was using JS instead of Webassembly:

this.dracoLoader.setDecoderConfig({ type: "js" });

Gatsby ships with his own version and implementation of webpack. To override/mutate it you have available the onCreateWebpackConfig API (from gatsby-node.js). You can also find an implementation example in Adding a Custom webpack Config.

Basically, you will need to add something like (prior to getting rid of your webpack.config.js):

Try using:

node-sass 4.x doesn't support Node 16 https://github.com/sass/node-sass#node-version-support-policy (I believe this might also be the case for CRA)

I was having the same issue, since I'm doing the bootcamp too. I don't know if you've already solved the issue, but I'll paste the solution here:

In react-spring version 9 the syntax of transition changed. Instead of map you have to povide a render prop to the transition. So you either change back to version 8 or refactor your code to something like this: