React-spring: @react-spring/core or @react-spring/three production errors

[kennetpostigo]

🐛 Bug Report

Hi, i'm using these to animate R3F components, but I do not run into this in development. The issue only occurs in production:

Uncaught TypeError: r.willAdvance is not a function
    at 9cfe2b4608e7231bacc0d7d7deffe07ef300d220.20fefe92f1d342a18960.js:1
    at Module.d (9cfe2b4608e7231bacc0d7d7deffe07ef300d220.20fefe92f1d342a18960.js:1)
    at a.b.advance (9cfe2b4608e7231bacc0d7d7deffe07ef300d220.20fefe92f1d342a18960.js:1)
    at 9cfe2b4608e7231bacc0d7d7deffe07ef300d220.20fefe92f1d342a18960.js:1
    at 28ddf37e733bed61e8c6ac53a0464422aa01203b.0544bc5f695fe9930e09.js:1
    at Array.forEach (<anonymous>)
    at xe (28ddf37e733bed61e8c6ac53a0464422aa01203b.0544bc5f695fe9930e09.js:1)

To Reproduce:

Here is the code example i'm trying to run, and again, I want to stress this only happens in production

import React, { useRef } from 'react';
import { Canvas, useFrame } from 'react-three-fiber';
import { useSpring } from '@react-spring/core';
import { a } from '@react-spring/three';
import styled from '@emotion/styled';

const endless = true;

const Cube = () => {
  const m: any = useRef();
  useFrame(() => {
    m.current.rotation.y += 0.01;
  });

  const { scale, color } = useSpring({
    from: { scale: [1, 1, 1], color: '#17bebb' },
    to: async next => {
      while (endless) {
        await next({ scale: [4, 4, 4], color: '#FAD8D6' });
        await next({ scale: [1, 1, 1], color: '#17bebb' });
        await next({ scale: [3, 3, 3], color: '#CD5334' });
        await next({ scale: [2, 2, 2], color: '#EDB88B' });
        await next({ scale: [1, 1, 1], color: '##17bebb' });
      }
    }
  });

  return (
    <a.mesh ref={m} scale={scale}>
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <a.meshStandardMaterial attach="material" color={color} />
    </a.mesh>
  );
};

const AnimatingWithReactSpring = () => {
  return (
    <Container>
      <Canvas>
        <ambientLight position={[1, 1, 1]} />
        <Cube />
      </Canvas>
    </Container>
  );
};

const Container = styled.div`
  border: 1px solid #ccc;
  border-radius: 5px;
`;

Expected behavior

I expect it to run well, just like it does in development

Environment

• "@react-spring/core": "^9.0.0-rc.3"
• "@react-spring/three": "^9.0.0-rc.3"

[aleclarson]

Please provide a git repository that reproduces the issue. Thanks 👍

[kennetpostigo]

The entirety of the code is in that snippet. You need to run it in with an application set to production mode. Also it seems like this is not the first time it has occured as a similar production issue mentioned here #1069

I think I've provided enough information. If you want to chase it down feel free, if not thats fine too. @aleclarson

[aleclarson]

1069 is related to Gatsby. Are you using that? If not, could you provide the webpack config that reproduces the issue? Thanks 👍

[kennetpostigo]

I'm not using Gatsby. I've come across this using Nextjs

[aleclarson]

That's good to know! 😆

Can you share your next.config.js?

[kennetpostigo]

Heres the config, in case you're wondering what the transpile plugin below is for, it's that those modules depend on threejs jsm code that isn't compiled.

// next.config.js
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
  'drei',
  'three',
  'postprocessing'
]);
const refract = require('refractor');
const images = require('remark-images');
const prism = require('@mapbox/rehype-prism');

const styledHighlight = {
  'styled-template-string': {
    pattern: /(styled(\.\w+|\([^\)]*\))(\.\w+(\([^\)]*\))*)*|css|injectGlobal|createGlobalStyle|keyframes|\.extend|\.withComponent)`(?:\$\{[^}]+\}|\\\\|\\?[^\\])*?`/,
    lookbehind: true,
    greedy: true,
    inside: {
      interpolation: {
        pattern: /\$\{[^}]+\}/,
        inside: {
          'interpolation-punctuation': {
            pattern: /^\$\{|\}$/,
            alias: 'punctuation'
          },
          rest: refract.languages.jsx
        }
      },
      string: {
        pattern: /[^$;]+/,
        inside: refract.languages.css,
        alias: 'language-css'
      }
    }
  }
};
refract.languages.insertBefore('jsx', 'template-string', styledHighlight);
refract.languages.insertBefore('js', 'template-string', styledHighlight);

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [images],
    rehypePlugins: [prism]
  }
});

module.exports = withPlugins([withMDX, withTM], {
  pageExtensions: ['ts', 'tsx', 'md', 'mdx']
});

[kennetpostigo]

Btw, the error doesn't cause the page to break or anything. Just makes my R3F components that depend on react-spring animation not render. All other R3F components work like normal

[ahtcx]

I also get this when bundling with [email protected]. I didn't have enough time to dig further in to the issue and reverted to [email protected] which works fine, but it seems to be around how webpack was importing modules.

[aleclarson]

reverted to [email protected] which works fine

Interestingly, that's the version of webpack that next is using:
https://github.com/vercel/next.js/blob/681ebfa5cbe24b738ee08a4a5964c0b942af49bb/packages/next/package.json#L110

[ivnaleta]

Please provide a git repository that reproduces the issue. Thanks

Hi.
It can be reproduced on example from react-three-fiber docs:
https://codesandbox.io/s/r3f-react-spring-basic-demo-sm41y
It runs fine in codesandbox and in dev mode (if run by npm start), but animation not working with same error in build version (npm run build)

[ivnaleta]

Also there is a very similar error when build with typescript.
Code like

import {a} from "react-spring/three";
console.log('a', a);

work fine in dev, but build app not starting due to error:

 globals.ts:16 Uncaught TypeError: a.a is not a constructor
    at Module.<anonymous> (globals.ts:16)
    at i ((index):1)
    at Object.<anonymous> (FrameLoop.ts:2)
    at Object.<anonymous> (2.829ff874.chunk.js:2)
    at i ((index):1)
    at Object.<anonymous> (2.829ff874.chunk.js:2)
    at i ((index):1)
    at Object.<anonymous> (three.js:1)
    at i ((index):1)
    at Module.54 (main.cf74ec6e.chunk.js:1)

Which is apparently line export let frameLoop = new FrameLoop().

Here repository with this error - https://github.com/ivnaleta/ts-three-spring-build-error
Only diffs with empty create react app are imports and lines above.

[aleclarson]

The issue was that "sideEffects": false was being used when it shouldn't be, causing Globals.assign calls to be tree-shaked. Will be fixed in next RC. 👍

[ivnaleta]

The issue was that "sideEffects": false was being used when it shouldn't be, causing Globals.assign calls to be tree-shaked. Will be fixed in next RC.

Need some suggestion / some help.
Right now because of combination of problems react-spring + react-three-fiber is unusable for me:

• 9x version dosn't build
• In 8x version infinite loops cause browser freeze because of this issue - https://github.com/react-spring/react-spring/issues/59
• Don’t want to change webpack config like kennet (using react-cli)

I tried to fork 9x branch, but currently npm run build doesn’t work, if I understand correctly this branch is wip.
Maybe you could point me to a more stable branch / commit of 9x?
Or maybe its just bad idea to use 9x version for production right now and it should be better to use something else? (I take react-spring because of react-three-fiber guide).

[aleclarson]

@ivnaleta You could manually remove "sideEffects": false from the package.json of every node_modules/@react-spring/* directory, then use patch-package to auto-apply those changes when node_modules is re-installed.

Otherwise, if you still want to build v9 locally, you can follow the Contributing Guide and let me know if something trips you up. 👍

[ivnaleta]

@aleclarson
thanks, i ended up with script, but patch-package was very helpful

[iam4x]

I can confirm that using NextJS with webpack > ^4.44.x is broken by this, in the mean time you can force webpack to ~4.43.x with resolutions in your package.json:

  "resolutions": {
    "webpack": "~4.43.0"
  },

[kennetpostigo]

I'm not opposed to waiting for a fix in the next version, any idea of when that might be?

[heymartinadams]

I can confirm that upgrading from NextJS 9.4.5-canary.45 to 9.5.0 produces the same error for me as well.

[CharlieHess]

I'm hitting this in a similar environment (Next + r3f + react-spring) and none of the workarounds listed here work.

⛔ patch-package to remove sideEffects for all spring packages
⛔ [email protected]
⛔ [email protected]

[Emiliano-Bucci]

@aleclarson Is there a way to use patch-package? Because it seems that it doesn't patch the changes that are only applied to the package.json :/

[ivnaleta]

@CharlieHess @Emiliano-Bucci
I ended up adding scpipt below in package.json postinstall hook. ("postinstall": "node postinstall.js", + "replace-in-file in devDependencies)

const replace = require('replace-in-file');

const removeAllSideEffectsFalseFromReactSpringPackages = async () => {
  try {
    const results = await replace({
      files: "node_modules/@react-spring/*/package.json",
      from: `"sideEffects": false`,
      to: `"sideEffects": true`
    });

  // console.log(results); // uncomment to log changed files
  } catch (e) {
    console.log('error while trying to remove string "sideEffects:false" from react-spring packages', e);
  }

}


removeAllSideEffectsFalseFromReactSpringPackages();

[ahtcx]

@ivnaleta you can acheive the same thing with patch-package as @aleclarson stated which worked for me and looks a lot cleaner.

[ivnaleta]

@ahtcx
It is cleaner, but doesn't work for me
I didn't figure out why, although there is a few open issues in patch-package repo about changing package.json.

[Emiliano-Bucci]

@ivnaleta Try adding --exclude at the end of the command, it should work. Example: npx patch-package react-spring --exclude

[creativiii]

Okay so, I tried many of the fixes here, but none of them work. patch-package looked really promising, but trying to run it after making the changes returns:

$ npx patch-package
patch-package 6.2.2
Applying patches...

**ERROR** Failed to apply patch for package @react-spring/animated at path

    node_modules/@react-spring/animated

  This error was caused because patch-package cannot apply the following patch file:

    patches/@react-spring+animated+9.0.0-rc.3.patch

  Try removing node_modules and trying again. If that doesn't work, maybe there was
  an accidental change made to the patch file? Try recreating it by manually
  editing the appropriate files and running:

    patch-package @react-spring/animated

  If that doesn't work, then it's a bug in patch-package, so please submit a bug
  report. Thanks!

    https://github.com/ds300/patch-package/issues

Has anyone actually been able to fix this? Is there a development branch that we can use in the meantime?

EDIT:

So I tried a bunch of different stuff until I noticed that the patch files create by patch-package had a bunch of stuff in them that hadn't been changed and I didn't need to be changed, this prompted me to try to remove everything and keep the bare minimum so that my files looked something like this:

diff --git a/node_modules/@react-spring/animated/package.json b/node_modules/@react-spring/animated/package.json
index 4ef7565..f58f540 100644
--- a/node_modules/@react-spring/animated/package.json
+++ b/node_modules/@react-spring/animated/package.json
@@ -65,7 +74,6 @@
     "access": "public"
   },
   "react-native": "src/index.ts",
-  "sideEffects": false,
   "types": "index.d.ts",
   "version": "9.0.0-rc.3"
 }

I then tried installing again and it worked!

So here's an actual guide on fixing this:

• Go to node_modules/@react_spring (not node_modules/react_spring)
• Edit each package.json in the included folders (animated, core, native, shared, three, web, zdog)
• run npx patch-package --exclude 'nothing' @react-spring/<folder>, where <folder> is one of animated, core, native, shared, three, web, zdog each
• This should create files inside patches/
• Go into each file and delete everything apart from the bit that mentions "sideEffects": false (so that it looks like the example above)
• add "postinstall": "patch-package" to your scripts in package.json
• hopefully react-spring should be automatically patched when running npm install

Here's hoping we get a new RC soon!

[anim8rDev]

I'm running into this same problem too (using Gatsby). Is there an update to how long it may (or may not) be fixed? I wasn't able to get patch-package to work (user error, I'm sure). I resorted to drastic measures by switching to Framer for the animation on all but one page (this last one would be a serious endeavor). Just wondering if there was any sort of timeline?

Thanks.

[mr-wildcard]

had the exact same error in production build only and using @iam4x solution helped me.

// in package.json

"resolutions": {
  "webpack": "~4.43.0"
},

[marklundin]

The issue was that "sideEffects": false was being used when it shouldn't be, causing Globals.assign calls to be tree-shaked. Will be fixed in next RC. 👍

Thanks for isolating this @aleclarson. Is there any timeline on the next RC?

[vietnezo]

@CharlieHess @Emiliano-Bucci
I ended up adding scpipt below in package.json postinstall hook. ("postinstall": "node postinstall.js", + "replace-in-file in devDependencies)

const replace = require('replace-in-file');

const removeAllSideEffectsFalseFromReactSpringPackages = async () => {
  try {
    const results = await replace({
      files: "node_modules/@react-spring/*/package.json",
      from: `"sideEffects": false`,
      to: `"sideEffects": true`
    });

  // console.log(results); // uncomment to log changed files
  } catch (e) {
    console.log('error while trying to remove string "sideEffects:false" from react-spring packages', e);
  }

}


removeAllSideEffectsFalseFromReactSpringPackages();

Thank you, you saved my day!!

I added theses script in package.json and it worked.

"scripts": {
    "dev": "node postinstall.js && next dev",
    "build": "node postinstall.js && next build",
    "start": "next start",
},
"dependencies": {
    "react-spring": "9.0.0-rc.3",
},
"devDependencies": {
    "replace-in-file": "^6.1.0"
},

Hope this issuse would be fixed in next version!

[jerelmiller]

Confirming that removing "sideEffects": false from package.json fixed the issue for me. Thanks for the suggestion @aleclarson!

[ddennis]

I just had the same bug after bootstrapping a new create-react-app.
Downgrading react 17.0.1 and react-scripts 4.0.0 back to 16.13.1 and 3.4.1 also works.

[adyz]

I had a gatsby project where I used react-spring and I get the same error after updating my dependencies. I've rolled back all the packages along with the package.lock file too.

[creativiii]

I had a gatsby project where I used react-spring and I get the same error after updating my dependencies. I've rolled back all the packages along with the package.lock file too.

This is a known issue, if you scroll up in the thread there's multiple temporary solutions available!

[skrhlm]

Could this not be released as a patch ? I think a lot of people are using the rc3 because it has been said that it's more stable than 8.x, and since rc4 seems quite distant it might be a good idea to get really breaking things like this onto npm.

[brotzky]

Thank you, @creativiii. Those steps worked perfectly. It's possible patch-package has been updated as I didn't have to do this step:

• Go into each file and delete everything apart from the bit that mentions "sideEffects": false (so that it looks like the example above)

Thanks again for the detailed steps. We really appreciate it.

[Inviz]

Seeing the same with preact & create-react-app.

[bzmillerboy]

I faced this issue on Gatsby v2.24.91 two hours before go live time, ugh.

Thanks @creativiii, confirmed these steps worked for me.

[Inviz]

Also managed to solve it by pinning web pack to 4.4.3

[svirins]

@CharlieHess @Emiliano-Bucci
I ended up adding scpipt below in package.json postinstall hook. ("postinstall": "node postinstall.js", + "replace-in-file in devDependencies)

const replace = require('replace-in-file');

const removeAllSideEffectsFalseFromReactSpringPackages = async () => {
  try {
    const results = await replace({
      files: "node_modules/@react-spring/*/package.json",
      from: `"sideEffects": false`,
      to: `"sideEffects": true`
    });

  // console.log(results); // uncomment to log changed files
  } catch (e) {
    console.log('error while trying to remove string "sideEffects:false" from react-spring packages', e);
  }

}


removeAllSideEffectsFalseFromReactSpringPackages();

Thank you, you saved my day!!

I added theses script in package.json and it worked.

"scripts": {
    "dev": "node postinstall.js && next dev",
    "build": "node postinstall.js && next build",
    "start": "next start",
},
"dependencies": {
    "react-spring": "9.0.0-rc.3",
},
"devDependencies": {
    "replace-in-file": "^6.1.0"
},

Hope this issuse would be fixed in next version!

Thank you so much! Definitely, save my day!

[Apapin]

Same issue with vanilla create-react-app, yay for prod-only issues 😬
Fixed with patch-package which is a nifty tool to learn about, thanks for the pointer!

[heyimalex]

Commands to do @creativiii 's method mentioned here apart from setting up patch-package.

find ./node_modules/@react-spring -type f -depth 2 -name package.json -exec sed -i '' '/"sideEffects": false/d' {} +
find ./node_modules/@react-spring -type d -depth 1 | xargs -L1 -I{} basename "{}" | xargs L1 -I{} npx patch-package --exclude 'nothing' "@react-spring/{}"

[jdillick]

For the record, even with the potential simplicity of using patch-package, this effort is vastly more complex for projects than simply publishing an 9.0.0-rc.4 with this fix.

patch-package (and a like strategy) suffers from some fragile build context problems. It is easy to enact this, have it work locally, and fail on a remote build system.

Such is the case for my project and building on heroku. Their devDependency phase of build applies this patch correctly, only to reinstall the package again after pruning devDependencies, and this time patch-package fails due to slightly different working directory context.

While this sort of issue isn't really the fault of react-spring, it could be totally avoidable (this whole work-around would be as well) with such a low effort action by the maintainer. Please, please with a cherry-on-top, npm publish 9.0.0-rc.4 with this trivial build fix.

If main branch is in a bad state, you could cut a hotfix branch off tag https://github.com/pmndrs/react-spring/releases/tag/v9.0.0-rc.3, apply fix, bump to v9.0.0-rc.4, and npm publish This would be so helpful. 🥺

[heyimalex]

@jdillick Made a PR #1229 which should make this easy.

[chenxsan]

For people who's using react-spring along with webpack, here's a workaround I believe you can use in webpack.config.js before a new react-spring is out with the fix:

  module: {
    rules: [
      {
        test: /react-spring/,
        sideEffects: true
      },