Module file contains ES6 syntax that breaks in IE11
See original GitHub issueWhen importing AutoNumeric in conjunction with a module bundler with the import syntax, like so
import AutoNumeric from 'autonumeric'
The file that ends up being imported is the one specified by main
in package.json. In this case, it’s dist/autoNumeric.js
. That file, however, contains ES6 syntax not supported by IE11 (notably, the arrow function =>
).
Most people choose to not run Babel on node_modules
contents as this severely slows down builds and can even cause problems. As such, it has become common practice to transpile to ES5 compatible code the module file that will be included. One such discussion on StackOverflow.
An alternate solution in the meantime is to instead do:
import AutoNumeric from 'autonumeric/dist/autoNumeric.min';
To import the minified version which seems to be generated using only ES5 code.
I’m using the latest AutoNumeric version, 4.4.0.
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (8 by maintainers)
Top GitHub Comments
I did some more digging, and I apologize, it turns out I was 100% wrong about pretty much everything I said.
Files in
dist
are in fact all ES5. I was however actually getting ES6 AutoNumeric files in my bundle. That’s due to Webpack’sresolve.mainFields
defaulting to['browser', 'module', 'main']
. AutoNumeric has nobrowser
field but it does have amodule
one, which correctly points to the original ES6 code. I changed mymainFields
config to instead be['browser', 'main']
and all my problems are solved.I would make the recommendation that
browser
be used instead ofmain
. As per npm’sbrowser
docs:Thanks again for your help and sorry for the false alarm!
Awesome, thank you @AlexandreBonneau