IE syntax error

[pebcakerror]

I am getting an error in IE 11 (I wish I didn't have to support it but... corporate) with a syntax error

return Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {

It's erroring on the fat arrow.

I suspect this is something misconfigured on my end but everything worked and built correctly until I added react-laag and I'm not good enough at understanding webpack and babel yet to know.

I had my webpack output the stats file to analyze the dependencies

It looks like ./node_modules/react-laag/dist/index.es.js is getting picked up which does in-fact contain the fat arrows.

I see that the package.json contains

  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",

I don't know enough about module and jsnext:main to know if that's correct.

Looking at Redux in node_modules for comparison they do something similar and appear to use similar tooling with rollup and typescript.

"main": "lib/redux.js",
"module": "es/redux.js",

However I can't find any fat arrows in their es/redux.js.

All that said, browsing the examples in IE11 mostly work so maybe is in my janky configs: https://gist.github.com/pebcakerror/c1bccfcf91c345b46a074e9e725f536b

[everweij]

Hi @pebcakerror, Sorry for the late reply! I'm sorry you're experiencing issues with getting react-laag to work on IE11. Hopefully we will get this work!

Personally, I've only checked whether IE11 works by using create-react-app and gatsby, and with their included config it works out of the box. If you look at the webpack config for create-react-app you'll notice this:

So basically, besides compiling files in your own 'src' directory, they also compile only standard ES features (arrow syntax) outside of your 'src' directory like 'node_modules'.

Perhaps you can try to look at cra's config (https://github.com/facebook/create-react-app/blob/c03bb366e0e901b33acd9783db3003cb49eddf80/packages/react-scripts/config/webpack.config.js#L455), and use their strategy.

I could of course compile the output of react-laag to es5, but after a quick check it turns out that this will increase the bundle size by > 20%, and since I don't know how many users run into the same problem, I think I will leave the current rollup config as is.

Let me know if you need any help. Good luck!

[fcaballero]

Hi I just had the same problem, version 1.7.3, I managed to transpile it to es5, but now I getting an error in this line where is saying that current is null.

The transpiled file works fine in chrome and firefox, but I'm wondering if in IE it's failing because of the transpiling I did, so @everweij, is it possible for you to continue delivering the library in the same way as of now, but additionally add another file fully transpiled to es5? So people that are not using create-react-app doesn't have this kind of problems.

BTW, I'm using typescript, so I added the next in my webpack config file:

{
   test: /\.js$/,
   include: /node_modules\/react-laag\/dist\/index\.js/,
  use: [{ loader: "awesome-typescript-loader"}]
},

Thanks