IE11 zoom-level have syntax error
Closed this issue · 6 comments
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Hi, I tried to test basic usage in IE11 but I am getting syntax error that comes from zoom-level package. I use "@babel/polyfill": "7.4.3", but it does not seem to help :/
Here is screenshot from where the IE11 seem to think its syntax error.
It is enough to just import Scrollbar to the code and it breaks.
Which versions of react-scrollbars-custom, React, and which browser / OS are affected by this issue? Did this work in previous versions of react-scrollbars-custom?
"react-scrollbars-custom": "4.0.5",
IE 11, WIN10
- suppose that should've been at zoom-level repo %)
- update & install dependencies, released patch for zoom-level;
@xobotyi The change you made is not sufficient, node_modules/zoom-level/dist/zoom-level.esm.js still contains non-ES5 compatible features like arrow functions.
Rather than altering your typescript source, you should change the rollup config to target es5 for the 'module' key of package.json if you want to be IE10+ source compatible.
Reading on this:
https://2ality.com/2017/06/pkg-esnext.html
https://2ality.com/2019/04/nodejs-esm-impl.html
I'm still not sure where npm and the ecosystem are up to with non-transpiled modules, but for now using esnext as a target seems like it's going to break things.
@bz2 By recent friday 'module' been pointing to the transpiled version too.
Personally, i'm using the aproach written in 3rd chapter of your first link.
As practice shows - almost everyone who uses ESM and latest features are using babel and webpack, and there is nothing hard to add a few more lines to the webpack config.
And the proper way in my opinion is to deliver two versions and make you decide which one do you need. There is absolutely no sense to force developers that are not targeted to IE to pull ancient lang level and workarounds to their production bundle.
A lot of the modern packages that delivering both transpiled and untranspiled source are using a module filed for untanspiled source.
I'll add a notice to readmes now.
Or maybe i've got things wrong and module version should point to the transpield version but with es module exports >_>
I agree this is all a little frustrating.
The problem with putting non-es5 source in 'module' is there's really no good way of knowing in my webpack config which sub-dependencies (like zoom-level) need transpiling. Hence all this stuff with the .mjs alternative extension, which it seems there are also good arguments against.
At any rate, I couldn't see a good way of changing our local project config to handle some non-es5 code under node_modules, without specifically hardcoding certain package names, which I'd really like to avoid.
Released v4.0.11 - tweaked a bit bundling and distribution.
Now ESM version has mjs extension,
module pointing to the ES3+ ESM version,
esnext pointing to untranspiled version.