Android emulator: String.prototype.replaceAll is not a function

It looks like React/webpack during build process is not attaching correct polyfills, or the polyfills does not apply the ‘replaceAll’ function to String prototype


In an app built with Ionic 5, capacitor and React, everything runs correctly when debugging locally through browser using react-scripts start .

Then I tried to build it for Android, went through docs: added android platform, then build and started the app using ionic capacitor run android in the emulator.

The same code that runs well in local OSX browser, throws a following runtime error in an emulator:

TypeError: e.replaceAll is not a function

where “e” is of the string type.


Emulator details

Android version: 11
Browser version in emulator: Chrome/83.0.4103.44


Package.json

{
  "name": "example",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/android": "^2.4.5",
    "@capacitor/core": "2.4.2",
    "@ionic/react": "^5.5.2",
    "@ionic/react-router": "^5.5.2",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "@types/jest": "^26.0.19",
    "@types/node": "^14.14.14",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.6",
    "assert": "^2.0.0",
    "ionicons": "^5.2.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "tslint": "^6.1.3",
    "typescript": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start --no-cache",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 5 chrome versions",
      "last 5 firefox versions",
      "last 5 safari versions"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "2.4.2"
  },
  "description": "An Ionic project"
}

Have you guys ever struggled with such anomalies?

I’ll appreciate any help!


EDIT:

It looks like String.prototype.replaceAll is not supported by polyfills… So why ESLint does not highlight it as not defined :thinking:


EDIT 2:

To make linter detect it as undefined tsconfig.json can be used to configure target, like so:

"compilerOptions": {
    "target": "es5",
    # ES6 instead of esnext:        vvv
    "lib": ["dom", "dom.iterable", "ES6"]