[Typescript] NOT adding polyfill to the web worker scope

[gaplo917]

Reproduce:

1. Create React App

npx create-react-app my-app  --template typescript
cd my-app
npm start

2. Use react-app-rewired to customize Webpack

3. In config-overrides.js, add the comlink-loader at the top of rules

/**
 * Config to override webpack config from create-react-app
 */
const { override } = require('customize-cra');
module.exports = override((config, env) => {
  config.module.rules.unshift({
    test: /\.worker.singleton\.(js|ts)$/i,
    loader: 'comlink-loader',
    options: {
      singleton: true
    }
  });
  config.module.rules.unshift({
    test: /\.worker\.(js|ts)$/i,
    loader: 'comlink-loader',
    options: {
      singleton: false
    }
  });
  return config;
});

4. create a task.worker.singleton.ts

export async function test(): string {
  return "something".replaceAll('s', 'g')
}

Actual: In an old version browser (i.e. Android simulator), It will throw .replaceAll() is not a function

Expected: comlink-loader will bundle the polyfill to all .worker.ts to sync with the non-worker js file.

Solution

Add the Polyfill manaully.

import 'core-js';
import 'regenerator-runtime/runtime';

export async function test(): string {
  return "something".replaceAll('s', 'g')
}