Search code examples
reactjsinternet-explorer-11polyfills

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

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.

Solution

  • 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];
}