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

user_4207237 0
Viewed 6468

My application working fine on Firefox and Google Chrome, but unfortunately not on IE 11 or Edge. I have installed "react-app-polyfill": "^1.0.6", added all the polyfills needed as explained below:

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"
    ]
  }

Error on 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 | }

Thanks in advance for your help.

polyfills internet-explorer-11 reactjs
2 Answers

I'm sharing with you the issue and the answer. As I have mentioned above, that I have added all the polyfills required but the issue still remains.

After couple of hours of debugging I have found out that for loop of format causing the issue, as it's not supported on IE11:

Old format:

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

New format:

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

Try adding babel polyfill to your app

npm install --save babel-polyfill

Add below line at top of index.js file

import "babel-polyfill";

For more information, check similar issue and solution details here.

user_139075950
Related