Issue with Gatsby Build

[konsalex]

🐛 Bug Report

I have an issue with react-spring when I build the code with Gatsby. Not sure if I had to ask Gatsby folks first or here.

When I develop my website locally, animation run smoothly and correct, but when I build my code, the code breaks, and an additional div element inherits the styling of the animated-div.

To Reproduce

Steps to reproduce the behavior:
Build the codesandbox example as a gatsby page, and check the resulting code.

Expected behavior

The local version runs smoothly as expected

Then, when I build I get this result

Link to repro

Here you can find the working example : https://codesandbox.io/s/eager-wood-126cj?file=/src/index.js

Environment

• react-spring 8.0.27
• react 16.13.1
• gatsby 2.29.1

[konsalex]

Hey @aleclarson , just a heads up, I tested with v9 also, still the same issue.

[joshuaellis]

I've never used Gatsby before, so maybe someone can help me understand, why would tree-shaking the module on build break it?

[joshuaellis]

I've opened an issue in Gatsby to see what they have to say.

[joshuaellis]

@konsalex, can you do me a favour and try with v9? We're not putting sideEffects: false in our package.json anymore so hopefully this should be resolved? Also that repro doesn't use gatsby, so I can't check myself.

[konsalex]

Hey @joshuaellis check with v9 still the same issue. Feel feel to check at : my blog, right now Codesandbox is unable to spin up a Gatsby project.

The react-spring version:

{
  name: 'react-spring',
  'dist-tags': {
    latest: '9.0.0',
    old: '7.2.11',
    next: '9.0.0-rc.3',
    beta: '8.0.25-beta.1'
  },
  versions: [
    '1.0.0',
    ...
    '9.0.0-rc.1',
    '9.0.0-rc.2',
    '9.0.0-rc.3',
    '9.0.0'
  ],
  time: {
    ...
    '9.0.0-rc.1': '2020-05-06T04:02:17.882Z',
    '9.0.0-rc.2': '2020-05-07T00:11:42.214Z',
    '9.0.0-rc.3': '2020-05-11T21:20:42.053Z',
    '9.0.0': '2021-03-23T12:32:30.039Z'
  },
  maintainers: [
    {
      name: 'drcmda',
      email: '[email protected]'
    },
    {
      name: 'tdfka_rick',
      email: '[email protected]'
    }
  ],
  description: 'Cross-platform animation engine for React',
  homepage: 'https://github.com/pmndrs/react-spring#readme',
  keywords: [
    'animated',
    'animation',
    'hooks',
    'motion',
    'react',
    'react-native',
    'spring',
    'typescript',
    'velocity'
  ],
  author: {
    name: 'Paul Henschel'
  },
  bugs: {
    url: 'https://github.com/pmndrs/react-spring/issues'
  },
  license: 'MIT',
  readmeFilename: 'README.md',
  repository: {
    type: 'git',
    url: 'git+https://github.com/pmndrs/react-spring.git'
  },
  version: '9.0.0',
  main: 'web.cjs.js',
  module: 'web.js',
  types: 'web.d.ts',
  dependencies: {
    '@react-spring/core': '^9.0.0',
    '@react-spring/konva': '^9.0.0',
    '@react-spring/native': '^9.0.0',
    '@react-spring/three': '^9.0.0',
    '@react-spring/web': '^9.0.0',
    '@react-spring/zdog': '^9.0.0'
  },
  publishConfig: {
    access: 'public'
  },
  dist: {
    integrity: 'sha512-90s8beqIAKJA3VdmkGBEv8wZNAuhxE7ngKA5TGCd6Ya3wjyoZPzMR76vEYUSGv3Psu6q5R2dYXHh89LdlQTY1A==',
    shasum: 'ff9d3611b8f637f8500d7f1cbd990a5861384d50',
    tarball: 'https://registry.npmjs.org/react-spring/-/react-spring-9.0.0.tgz',
    fileCount: 21,
    unpackedSize: 9040,
    'npm-signature': '-----BEGIN PGP SIGNATURE-----\r\n' +
      'Version: OpenPGP.js v3.0.13\r\n' +
      'Comment: https://openpgpjs.org\r\n' +
      '\r\n' +
      'wsFcBAEBCAAQBQJgWd/eCRA9TVsSAnZWagAA6UIP/2QFnohJOrOBxiAmfjwV\n' +
      'LsVPTF8Q21FB5IKZ5tacMKbnWTd1CFj4aBP3jTZZfURl42hyldV+4oQ3jTMA\n' +
      'dqw6jy7qKN8+ryyTui9VNoAdrsRQjz0mtXUY3J9/6lAg1yRh7sbLnKsb5mMK\n' +
      'E0UNFXeL49FSdDafZFTnunDjavvb3abzs6uYMFYFpQYh2LFytpVXothJwLRu\n' +
      'ScAzczwaEomI2Lpop8XL+9/gEf5RfBCoWlQIQwsLZqrgEwTL7U5Dgd8Ru9Sf\n' +
      'LYsx/pCjReeFkgHASTDdw8SOCPkKn1x8PXc9gptkWTUGKryeEBwJq3qOt8En\n' +
      'IJbSTko7f9lLR0hICxPDVoNk3065Gg6KU+9sns1XXQ6V9ZkWFkpgSzlHWlma\n' +
      'X6yzo6xi7HETNnxmQfE5a/bA4IR3SJnzk9qHLBlCKiVRxznhDnmkUstaawBg\n' +
      '3RxNSf4v8kEg+RU4Wwm1MTzDj0VCFKvGeXxvn/Ho6Dpsd9q4RVhpxDK2ZW6/\n' +
      'gCll9HuFPjr9JnqenAtGYaNTxKPfn6K1znl825CM8oKOj0dOdyzFTs8tcDFQ\n' +
      'KpOrfo0NefCtihfD3q6kjSBK4hcIi3Yu7HvJrzr02jyk/bSIYiyR2R9z70GE\n' +
      'zRztTgpbuxb96B7RMNG05wy6YEA1eVjtyTWX2kLOxmlG571hSteA2b9jcaPg\n' +
      'vzLm\r\n' +
      '=DB1e\r\n' +
      '-----END PGP SIGNATURE-----\r\n'
  },
  directories: {}
}

[konsalex]

I fixed this by preventing tree-shaking of the react-spring package. Put the following in your gatsby-node.js file:

// Prevent tree-shaking of react-spring
exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith('build-javascript')) {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-spring/,
            sideEffects: true
          }
        ]
      }
    });
  }
};```

@runemadsen Unfortenately that did not help either

[joshuaellis]

@konsalex I'm going to need a repo I can use, debug and test this isn't a very straight forward fix. A built site isn't super helpful.

If you can make a small repo in github that would be great. Thanks.

[konsalex]

@joshuaellis Here you go: https://github.com/konsalex/gatsby-spring-repro

In the development you will see that everything works alright and as soon as we build this something breaks.

[runemadsen]

@konsalex I just checked your blog, and you're getting the exact error message that I was getting:

TypeError: r.willAdvance is not a function

This is because Gatsby's build process removed this function when doing tree shaking. Can you try adding my fix to gatsby-node.js again and run gatsby clean before building?

[konsalex]

@runemadsen Tried this again, to the new repo also, with your snippet and cleaning .cache + running gatsby clean, but still the same issue.

[joshuaellis]

Okay I've looked at this this morning, I don't have a solution but my findings are that the StyledComponent element is having its attributes overwritten. I don't think it's an issue with styled-components because it still happens if I directly put the styles on the element.

Thankfully it's nothing to do with sideEffects.

[joshuaellis]

Okay looking at it a bit further, it doesn't do this if you change the elements to spans, which is weird. And only to the first div element, if I duplicate the icons element that is:

IMO this feels like a Gatsby static building issue. The fact it doesn't happen when you use a different element e.g span, happens regardless of if it's a styled component and then only happens on the first element makes me think this...

thoughts?

[konsalex]

@joshuaellis I can confirm that with a span wrapper instead of a div around social media icons it is indeed working.

[joshuaellis]

@konsalex, that's good to hear, I'm going to close this I know it's not ideal, it might be worth raising an issue with Gatsby and see what they say based on the new revelation. But I doubt (and happy to be told otherwise) that it's a problem with react-spring