IE11 Error: TypeError: non-array objects must have a [Symbol.iterator]() method

Question

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

index.js

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

package.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

尝试将 babel polyfill 添加到您的应用程序

npm install --save babel-polyfill

在index.js 文件

顶部添加下行

import "babel-polyfill";

有关更多信息，请查看类似问题和解决方案的详细信息here。

Answer 2

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

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

旧格式：

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

新格式：

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

IE11 Error: TypeError: non-array objects must have a [Symbol.iterator]() method

IE11 Error: TypeError: non-array objects must have a [Symbol.iterator]() method

polyfills

internet-explorer-11

reactjs