react-spring SideEffects must be set to true

[joshuaellis]

Description

This issue has been reported to us a few times see: pmndrs/react-spring#1239 & pmndrs/react-spring#1069 as an example. Peoples workaround is to enforce sideEffects:true on the particular package:

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith("build-javascript")) {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-spring/,
            sideEffects: true
          }
        ]
      }
    })
  }
}

It'd be great to get your feedback on whether this is the intended fix for the issue or it's a bug in either library that can be fixed. If it's the correct thing to do then I can add some documentation to let everyone know so neither library gets the bugs.

[herecydev]

As far as I can see, Gatsby is doing nothing special in this regard and is delegating this decision making to webpack.There's some documentation here https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free that highlights the difficulties.

it's necessary to provide hints to webpack's compiler on the "pureness" of your code.

Are there any side effects in react spring that you are aware of? Perhaps it's prudent to explicitly call out those files so webpack can function better.

Although the workaround works, it's surely much better that react spring defines this in its package.json and then all webpack users will benefit from this change.

[joshuaellis]

I think the library has specifically removed sideEffects:false from it's package files according to this issue – pmndrs/react-spring#1078 I've asked the original author of the issue in spring to try the newest package and see if that works.

It doesn't sound like we have to explicitly declare sideEffects:true instead?

Although the workaround works, it's surely much better that react spring defines this in its package.json and then all webpack users will benefit from this change.

I definitely agree, I'm just trying to get my head round what sideEffects actually were, so thank you for the article 👍🏼 It explains why this issue is so important pmndrs/react-spring#1158

[herecydev]

Yes I agree, false would indicate there's no side effects and that could further inflict issues.

True would almost definitely solve the issue although its heavy handed. Specifically highlighting the sideffect files seems to be the utopia but might be complex, as there are a number of calls to Globals.assign in several files for your packages.

[joshuaellis]

Specifically highlighting the sideffect files seems to be the utopia but might be complex, as there are a number of calls to Globals.assign in several files for your packages.

I agree, it's definitely something to look into. Thanks for the insight 👍🏼