How to add polyfill for String.repeat function for ie11?

Question

How would I add polyfill for String.repeat method for ie11? I am not using it directly in my code, it's probably some of the imported libs.

In IE console I get this error: Object doesn't support property or method 'repeat'

I also get 'AbortController' is undefined which I am also not using my code, probably external lib again.

I am using create react app and I imported in index.js:

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

I tried adding https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat#Polyfill to my index.js but it didn't do anything.

Did anyone else have similar problem?

Answer 1

To add a String.repeat polyfill for IE11, I suggest using the core-js library to polyfill missing features.

Install core-js by running the following command:

npm install --save core-js@3.6.5

Inside of src/index.js , import the appropriate polyfill at the very top:

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'core-js/features/string/repeat';

import React from 'react';
// ...

---

As for AbortController , install it by running the following command:

npm install --save abortcontroller-polyfill

Edit your src/index.js file to import it:

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'core-js/features/string/repeat';
import 'abortcontroller-polyfill';

import React from 'react';
// ...

• You don't need to install promise-polyfill/src/polyfill and unfetch/polyfill for AbortController since create-react-apps polyfills for IE11 already come with Promise and fetch polyfills
  • Supporting Internet Explorer
• If you are not using create-react-app IE11 polyfills, however, I suggest you check out the following answer:
  • Abort Controller in IE11 doesn't work. Any way to support it

Answer 2

This is for IE's ES6 incompatibility issues.

Add following polyfills with npm

promise-polyfill
unfetch
abortcontroller-polyfill

and import them like

import Promise from "promise-polyfill";
import fetch from 'unfetch';
import 'abortcontroller-polyfill';

for Abortcontroller

& For Object.repeat Copy and paste MDN's polyfill code into very first of you JS file. That will do.

EDIT For React this should look like this (you can do it in index.js )

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

import Promise from "promise-polyfill";
import fetch from 'unfetch';
import 'abortcontroller-polyfill';