@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 - Prefer named exports for normalize color #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 :/

[mwskwong]

RC 3 has been released for months now. Since then, there are quite some commits and updates. Are there any plans to release an RC 4 or even an official release?

[joshuaellis]

RC 3 has been released for months now. Since then, there are quite some commits and updates. Are there any plans to release an RC 4 or even an official release?

Please see #1330

[Emiliano-Bucci]

@joshuaellis Hi! I've update react-spring to the latest version but still I'm getting this issue (of course I can fix it with the previous workaround), but just wanted to understand if this fix goes up in the version 9 or not :)

[joshuaellis]

@Emiliano-Bucci, the latest version being 9? Can you share a repo, this is odd.

[Emiliano-Bucci]

@joshuaellis Yes, version 9 (sorry); i'll create a repo to reproduce asap (sadly it's a private repo the one where I find the issue); I'll let you know :)

[joshuaellis]

Thansk @Emiliano-Bucci lets open a new issue too.

[ColinFendrick]

Is there a way to modify this webpack in create-react-app without ejecting?

[mwskwong]

Is there a way to modify this webpack in create-react-app without ejecting?

Have a look at @craco/craco.

[ColinFendrick]

Is there a way to modify this webpack in create-react-app without ejecting?

Have a look at @craco/craco.

Thanks, got it working! If anyone is using craco this craco.config.js works:

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /react-spring/,
            sideEffects: true
          }
        ]
      }
    }
  }
};