for of on HTMLCollection (getElementsBy) throws error when targets to ie11

[max-hk]

Bug Report

• I would like to work on a fix!

Current behavior

The output of @babel/preset-env and core-js failed to run on browsers.

Demo Project: https://github.com/maxloh/babel-failed

Open index.html and you will see the following error in console.

Input Code

[0, 1, 2].indexOf(0);

for (const node of document.getElementsByClassName('h1')) {
  console.log(node.innerText);
}

Expected behavior

The output run in browser with no errors.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

module.exports = {
  entry: './src/demo-1.js',
  mode: 'production',
  output: {
    filename: './demo-1.js',
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ["@babel/preset-env", { "useBuiltIns": "usage", "targets": { "ie": "11" }, "corejs": 3 }]
          ]
        }
      }
    }]
  }
};

Environment

• Babel version(s): 7.11.6
• Node/npm version:Node 14.7.0/npm 6.14.7
• OS: Windows 10
• Monorepo: [e.g. yes/no/Lerna]
• How you are using Babel: loader

Possible Solution

Additional context
Add any other context about the problem here. Or a screenshot if applicable

[babel-bot]

Hey @MaxLOh! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[existentialism]

@MaxLOh

Couple things...

(a) you'll want to exclude node_modules from your babel-loader config, otherwise core-js will get run through Babel and is the cause of the error in demo-1 and demo-2.

module: {
    rules: [{
      test: /\.js$/,
+     exclude: /node_modules/,
      use: {
        loader: 'babel-loader',

(b) you'll also want to enable the allowArrayLike option (https://babeljs.io/docs/en/babel-plugin-transform-for-of#allowarraylike), to get the for-of loop on a HTMLCollection inside demo-2 to work.

      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ["@babel/preset-env", { "useBuiltIns": "usage", "targets": { "ie": "11" }, "corejs": 3 }]
-         ]
+         ],
+         "plugins": [
+           ["@babel/plugin-transform-for-of", {
+             "allowArrayLike": true
+           }]
+         ]
        }

[JLHwung]

Duplicate of #11763

[max-hk]

@existentialism Thx.

Shouldn't (a) be documented in @babel/preset-env documentations?

[nicolo-ribaudo]

Probably it should be included in core-js's documentation, since it's specifically core-js that should not be transpiled because it's not compatible with Babel's transforms.

[JLHwung]

Can we add allowArrayLike: true to the for-of transform when targets contain ie?

[existentialism]

@JLHwung I'm down for that

[nicolo-ribaudo]

I think that we can only do that in loose mode, since that allows doing different uncompliant things.
Or we could add an arrowArrayLike option to preset-env, so that we don't add the helper by default.

[max-hk]

Probably it should be included in core-js's documentation, since it's specifically core-js that should not be transpiled because it's not compatible with Babel's transforms.

@nicolo-ribaudo But @babel/preset-env uses core-js by default.

New comers may get confused as a basic/minimal configuration not resulting in a working output.