SCRIPT1002: Syntax error in IE11 with React + Babel + Webpack

问题:

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 no create-react-app used here.

However - despite applying the latest babel-polyfill and babel-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 my webpack.base.config.js here:

// ... stuff entry: {   index: ['babel-polyfill', './index.js'], }, // ... more stuff 

Any ideas what's missing to get it running in IE11?

回答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.

https://github.com/selfrefactor/rambdax/issues/4

回答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.

文章来源: SCRIPT1002: Syntax error in IE11 with React + Babel + Webpack