SCRIPT1002: Syntax error in IE11 with React + Babel + Webpack
Solution 1
I found the issue. I'm using the module rambdax
as one of my devDependencies, which contains source code written in ES6 syntax (not transpiled to ES5) - more specifically arrow-functions =>
that are directly included within my bundle.js. IE11 of course can't execute arrow-functions or any other ES6 syntax.
Unfortunately neither Babel nor Webpack (UglifyJS Plugin) will touch the source of imported node_modules when compiling the bundle.js, which means: Module source code that gets imported as ES6 will remain ES6 in your webpack bundle.js
.
See https://github.com/facebookincubator/create-react-app/issues/1125 for more information on this topic.
I also already filed an issue regarding this problem within the ´rambdax´ repository. You can find out more about it there: https://github.com/selfrefactor/rambdax/issues/4
Solution 2
Not sure if it is still an issue.
With Webpack 4 I have done that
{ test: /\.js$/, include: [ // absolute path to module ] }
Included modules go through Babel hook.
VoodooDS
Updated on June 06, 2022Comments
-
VoodooDS almost 2 years
I'm trying to get my React App with ES2015 functionalities running in IE >= 11 using Webpack + Babel. The setup is custom, using the
inferno-compat
layer, so nocreate-react-app
used here.However - despite applying the latest
babel-polyfill
andbabel-preset-env
practices to my.babelrc
and webpack config, I still get a SCRIPT1002: Syntax error within my bundle.js when trying to access the app with IE11.When I follow the syntax error reference in IEs console, this is the part within the generated bundle.js that's conflicting (the arrow-function in particular):
function add(x, y) { if (y === undefined) { return yHolder => add(x, yHolder); } return x + y; }
These are the relevant dependencies within my
package.json
:"dependencies": { "inferno-redux": "^3.10.1", "react": "^15.6.0", "react-dom": "^15.6.0", "react-ga": "^2.2.0", "react-swipeable": "^4.1.0", "redux": "^3.7.2", "redux-saga": "^0.16.0", "regenerator-runtime": "^0.11.0" }, "devDependencies": { //... stuff "babel-cli": "^6.26.0", "babel-core": "^6.25.0", "babel-eslint": "^7.2.3", "babel-loader": "^7.1.1", "babel-plugin-inferno": "^3.2.0", "babel-plugin-module-resolver": "^2.7.1", "babel-plugin-transform-es2015-arrow-functions": "^6.22.0", "babel-plugin-transform-es2015-spread": "^6.22.0", "babel-plugin-transform-regenerator": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.24.1", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.24.1", //... some more stuff "webpack": "^3.8.1", "webpack-bundle-analyzer": "^2.9.1", "webpack-dev-middleware": "^1.12.2", "webpack-dev-server": "^2.9.5", "webpack-manifest-plugin": "^1.3.2", "webpack-merge": "^4.1.1", }
This is my
.babelrc
:{ "presets": [ "react", "flow", "es2015", [ "env", { "modules": "commonjs", "targets": { "browsers": ["last 2 versions", "ie >= 11"] } } ] ] }
I include the
babel-polyfill
within mywebpack.base.config.js
here:// ... stuff entry: { index: ['babel-polyfill', './index.js'], }, // ... more stuff
Any ideas what's missing to get it running in IE11?