Transpiling ES6 for IE11 with Babel

Question

I'm new to babel and trying to transpile my es6 code to work with IE11. But when I run the code in IE11 I get js errors about my forEach code. From what I've read I needed to add the preset @babel/preset-env. I added that to my config file so I'm not sure why it's not transpiling those forEach calls.

const path = require('path');

module.exports = {
    entry: {
        setupForm: "./Scripts/es6/setupForm.js",
        prelimForm: "./Scripts/es6/prelimForm.js"
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './Scripts/build'),
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/,
            query: {
                presets: ['@babel/preset-env']
            }
        }]
    }
}

I thought that perhaps I needed to additionally reference the babel polyfill.js as discussed here so I added it to my page, however, I'm getting the same error about Object doesn't support property or method 'forEach'.

Here is my package.json file.

{
  "name": "OurSite",
  "version": "1.0.0",
  "description": "",
  "main": "map_embed.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "dependencies": {}
}

Did you try to add `entry: ["@babel/polyfill", "./Scripts/es6/setupForm.js"],` to your webpack entry configuration? — Yoav Kadosh, Jun 04 '19 at 18:58
No. Because I have two files in my entry, how would I translate what you have to each file? — geoff swartz, Jun 04 '19 at 19:04
That depends on whether the two outputs will be on the same page or not. If they are on separate pages, you need to add the polyfill on both: `entry: {setupForm: ['@babel/polyfill','./Scripts/es6/setupForm.js']}` etc — Yoav Kadosh, Jun 04 '19 at 19:08
No they won't be on the same page. I tried doing this - setupForm: ["@babel-polyfill", "./Scripts/es6/setupForm.js"] - for the first one. But when running npm run build, I get an error "Module not found: Error: Can't resolve 'babel-polyfill'" Do I need to replace the @ symbol with ./node_modules? — geoff swartz, Jun 04 '19 at 19:10
No, you need to keep the `@`, are you sure you have `@babel/polyfill` installed as a package? — Yoav Kadosh, Jun 04 '19 at 19:12
According to this answer (https://stackoverflow.com/questions/33380063/what-is-the-best-way-to-include-babel-polyfill-using-multiple-entry-points), the person said you need to use babel-polyfill instead of babel/polyfill. This is what I have - node_modules/babel-polyfill - in the root of the project. — geoff swartz, Jun 04 '19 at 19:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/194457/discussion-between-yoav-kadosh-and-geoff-swartz). — Yoav Kadosh, Jun 04 '19 at 19:19
Possible duplicate of [babel polyfill being included, but forEach still doesn't work in IE11 on NodeLists](https://stackoverflow.com/questions/53331180/babel-polyfill-being-included-but-foreach-still-doesnt-work-in-ie11-on-nodelis) — connexo, Jun 04 '19 at 20:02

score 11 · Answer 1 · answered Mar 10 '20 at 11:20

11

As of Babel 7.4.0 @babel/polyfill has been deprecated in favour of core-js and regenerator packages.

https://babeljs.io/docs/en/babel-polyfill#docsNav

Either include in webpack

module.exports = {
  entry: {
    main: [
      'core-js/stable',
      'regenerator-runtime/runtime',
      'src/main.js'
    ]
  }
}

OR include in your js at the top

import 'core-js/stable';
import 'regenerator-runtime/runtime';

answered Mar 10 '20 at 11:20

minlare

2,454
25
46

See also [this updated SO](https://stackoverflow.com/a/54490329/6069586) on migrating from polyfill to this. – JWCS Jun 05 '20 at 02:42

Yoav Kadosh · Accepted Answer · 2019-06-04T19:58:10.170

Here's what you should do:

Install @babel/polyfill
Include @babel/polyfill in your entry (If you have more than 1 entry, and you don't plan to have both on the same page, include the polyfill in both)
Make sure all babel packages have the same major version, i.e. 7.x.x (don't worry about babel-loader - that's actually a webpack package, not a babel package).

Webpack

module.exports = {
    ...
    entry: {
        setupForm: ["@babel/polyfill", "./Scripts/es6/setupForm.js"],
        prelimForm: ["@babel/polyfill", "./Scripts/es6/prelimForm.js"]
    },
    ...
}

package.json

{
  ...
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/polyfill": "^7.4.4",
    "babel-loader": "^8.0.6",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
  ...
}

As a follow up, a portion of my problem was that I was using forEach on a nodelist and not an array. This helped solve that issue -https://stackoverflow.com/questions/53331180/babel-polyfill-being-included-but-foreach-still-doesnt-work-in-ie11-on-nodelis — geoff swartz, Jun 04 '19 at 20:02

Transpiling ES6 for IE11 with Babel

2 Answers2

Linked