IE11 错误：类型错误：非数组对象必须有 [Symbol.iterator]() 方法

Question

我的应用程序在 Firefox 和 Google Chrome 上运行良好，但不幸的是在 IE 11 或 Edge 上无法运行。我已经安装"react-app-polyfill": "^1.0.6"，添加了所有需要的 polyfill，如下所述：

索引.js

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

包.json

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 1 ie version"
    ]
  }

IE11 上的错误：

TypeError: Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.


_createForOfIteratorHelper
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createForOfIteratorHelper.js:54


> 54 |   throw new TypeError("Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     | ^
  55 | }

在此先感谢您的帮助。

Answer 1

我正在与您分享问题和答案。正如我上面提到的，我已经添加了所有需要的 polyfill，但问题仍然存在。

经过几个小时的调试，我发现导致问题的for循环of格式，因为它在 IE11 上不受支持：

旧格式：

for (const element of nameArray) {
  console.log(element);
}

新格式：

for(const i = 0; i < nameArray.length; i++) {
  const str = nameArray[i];
}