How to remove arrow functions from webpack output

Question

After running my code through webpack it contians arrow functions. I need the code to work in ie11 so I need to get rid of the arrow functions.

I'm using babel-loader for all .js files.

I wrote a loader to check code for arrow functions and ran it after the babel-loader and didn't get any arrow functions, so I know the output from babel is good.

I've also tried babel-polyfill and the babel plugin for transforming arrow funtions.

As I know the babel-loader outputs good code I suspect it might be a plugin, but I can't just disable them to test as that breaks the build.

Webpack plugins used in dev:

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

The problem also appears in prod as well, but fixing it in dev should tell me how to fix it in prod as well.

I don't know of anywhere else the arrow function could be coming from, so I expect to, in essence, get code that works on ie11, but there's arrow functions coming from somewhere so it doesn't work.

It's not my code, so I can't just post it all. I can, however, post relevant snippets, but I don't know where the problem is so I don't know what's relevant yet.

Answer 1

I had the same problem and found the cause and solution.

Cause

babel-loader converts the grammar of es6 and higher to es5. However, because the conversion is done by the loader, the conversion occurs only in each file before it is bundled. After the loader completes the conversion, webpack starts to bundle. However, webpack does not care about target version of babel-loader when it bundles files. It just bundles file with grammar of it's default ECMA version(which could be es6 or later). It was the reason why bundled result includes es6 grammar such as arrow function.

Initial Step

• file1 (es6)
• file2 (es6)
• file3 (es6)

After loader works

• file1' (es5)
• file2' (es5)
• file3' (es5)

After webpack bundles files

• bundled file (es6)

Solution

You can just simply add target: "es5" in webpack.config.js to handle this. After that, webpack bundles file in grammar of es5

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

// webpack.config.js
module: {
   ...
   target: "es5", // include this!!
   loaders: [
     {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
     }
  ]
}

In webpack 5:

module.exports = {
    target: ['web', 'es5']
}

target is positioned at the root of the config schema and needs to know whether it targets a node or web environment

References:

• https://webpack.js.org/configuration/target/
• Webpack 5 "dependOn" and target: "es5" appear to be incompatible

Answer 2

You can use babel. Since arrow functions comes with es6 , you can use babel to convert es5. Also this link could help to Webpack not converting ES6 to ES5.

Given below webpack config is what I used for babel.

module: {
   loaders: [
     {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
           babelrc: false,
           presets: ["@babel/preset-env", "@babel/preset-react","es2015"]
         }
     }
  ]
}