Babel-preset-env Not Transpiling Arrow Functions Using Webpack

I'm using babel with webpack, I'm trying to make arrow functions work with Internet Explorer, but I can't get it working. This is my package.json dev dependencies: 'devDependencies

Solution 1:

If you are using Babel 7, the behaviour of .babelrchas changed.

My advice is to drop .babelrc and put the config inside your webpack config.

Additionally you will need to either remove exclude: /node_modules/ from your config config, or add in some conditions for not excluding any libraries that use browser incompatible code (eg, arrow functions if you want to use IE).

Personally I removed the exclude altogether and noticed no degredation in speed or size.

Solution 2:

For those using Webpack 5, you need to specify the features that you want to transpile in the ouput.environment configuration, as explained here: https://webpack.js.org/configuration/output/#outputenvironment.

I am using differential serving so I have set all the flags according to a modern variable (which is set to true only if building for recent browsers, which is the last 5 versions of Chrome and Firefox and the last 2 versions of Safari, Edge and iOS).

output: {
  // ... other configsenvironment: {
    arrowFunction: modern,
    bigIntLiteral: modern,
    const: modern,
    destructuring: modern,
    dynamicImport: modern,
    forOf: modern,
    module: modern,
  },
}

Solution 3:

You have to specify the target browsers for your build. Based on that babel-preset-env decides which transforms need to be applied. Here's docs and example of config

{"presets":[["env",{"targets":{"browsers":["last 2 versions","safari >= 7"]}}]]}

And here are all possible ways to specify the browsers set.