When running webpack, and babel, the resulting bundle.js still contains arrow functions. This gives me a Syntax Error when running in Internet Explorer 10. I would like babel to replace the arrow functions with normal functions that IE can run.
My package.json has the following devDependencies:
"devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-1": "^6.24.1", "css-loader": "^0.28.9", "imports-loader": "^0.7.1", "style-loader": "^0.19.1", "webpack": "^3.11.0", "webpack-dev-server": "^2.11.2" }
My webpack.config.js looks like this:
module.exports = { entry: [ 'babel-polyfill', './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /.css$/, use: ['style-loader', 'css-loader'] } ], }, resolve: { enforceExtension: false, extensions: ['.js', '.jsx'] }, devServer: { host: '0.0.0.0', port: 5000, historyApiFallback: true, contentBase: './' } };
My .babelrc looks like this:
{ "presets": [ ["env", { "targets": {"browsers": ["last 2 versions"]}, "debug": true }], "react", "stage-3" ] }
To transpile, I run the command:
npm run build –production
And I get the following output in the console:
Using targets: { "chrome": "62", "android": "4.4.3", "edge": "15", "firefox": "56", "ie": "10", "ios": "10.3", "safari": "10.1" } Modules transform: commonjs Using plugins: check-es2015-constants {"android":"4.4.3","ie":"10"} transform-es2015-arrow-functions {"android":"4.4.3","ie":"10"} transform-es2015-block-scoped-functions {"android":"4.4.3","ie":"10"} transform-es2015-block-scoping {"android":"4.4.3","ie":"10"} transform-es2015-classes {"android":"4.4.3","ie":"10"} transform-es2015-computed-properties {"android":"4.4.3","ie":"10"} transform-es2015-destructuring {"android":"4.4.3","edge":"15","ie":"10"} transform-es2015-duplicate-keys {"android":"4.4.3","ie":"10"} transform-es2015-for-of {"android":"4.4.3","ie":"10"} transform-es2015-function-name {"android":"4.4.3","edge":"15","ie":"10"} transform-es2015-literals {"android":"4.4.3","ie":"10"} transform-es2015-object-super {"android":"4.4.3","ie":"10"} transform-es2015-parameters {"android":"4.4.3","ie":"10"} transform-es2015-shorthand-properties {"android":"4.4.3","ie":"10"} transform-es2015-spread {"android":"4.4.3","ie":"10"} transform-es2015-sticky-regex {"android":"4.4.3","ie":"10"} transform-es2015-template-literals {"android":"4.4.3","ie":"10"} transform-es2015-typeof-symbol {"android":"4.4.3","ie":"10"} transform-es2015-unicode-regex {"android":"4.4.3","ie":"10"} transform-regenerator {"android":"4.4.3","ie":"10"} transform-exponentiation-operator {"android":"4.4.3","ie":"10"} transform-async-to-generator {"android":"4.4.3","ie":"10"} syntax-trailing-function-commas {"android":"4.4.3","ie":"10"}
The transform-es2015-arrow-functions is listed as included, but when I open the generated bundle.js I can, for instance, see the following:
... function encoderForArrayFormat(options) { switch (options.arrayFormat) { case 'index': return (key, value, index) => { return value === null ? [ encode(key, options), ...
The above makes use of an arrow function, and produces a syntax error in Internet Explorer. Other ES6 stuff like ‘…’ gets transpiled.
What am I doing wrong?
Advertisement
Answer
I think an issue is related to query-string because it’s written in ES6 and not transpiled to ES5. Try to downgrade version from 6 to 5.
yarn add query-string@5.1.1