React-spring > 8.0.5 stopped working in IE 11

[taikn]

I am getting Syntax error in console which points to this line, probably due to defining variables with let

[jacobrask]

The Common JS bundle should support IE11. Try updating your imports to

import { useSpring } from 'react-spring/web.cjs'

Or add a Webpack alias

  resolve: {
    alias: {
      'react-spring$': 'react-spring/web.cjs',
      'react-spring/renderprops$': 'react-spring/renderprops.cjs'
    },
  }

Not entirely sure but not ie11 has been in the babelrc config since very long ago so the fact that IE11 support broke in 8.0.5 could be due to unrelated changes making Rollup actually picking up the babel config properly for the default esm bundle.

[taikn]

Thanks, I also found a note in the docs about it!

[ammmze]

oye...not ideal to import the commonjs module :\

Also FWIW the let is fine, its the arrow function on that line e=>"undefined"!=typeof window... that is causing the syntax error

[aleclarson]

@ammmze fwiw, we'll eventually split each platform into its own package so that the .cjs extension is no longer needed.

[aleclarson]

Note: In the latest beta, you can import the platform-specific package if you don't like adding .cjs.js to every import statement:

import { useSpring } from '@react-spring/native'

For the web platform, you can actually import react-spring normally, because its main module is equal to the .cjs.js path already:

import { useSpring } from 'react-spring'

---

@Chetan-k Importing react-use-gesture/web.cjs.js is not necessary, because the main module of react-use-gesture is that path already (see here). Also, useSprings does not depend on react-use-gesture in any way.

[cr0cK]

Unfortunately, the previous tricks don't work for me, my build is still broken for IE11. Only solution that I have found for now is to stick with 8.0.4...

[ricksmit3000]

unfortunatly didnt work for me either.