create-react-app + typescript does not use browserslist

user_2051938 0
Viewed 1123

create-react-app by default uses browserslist, but as I see it works only for *.js files (I'm not so sure), for *.ts no difference.

My env (generated by create-react-app):

  • webpack: ~4.29.6
  • react: ~16.12.0
  • typescript: ~3.7.2

Code of project consists of *.ts / *.tsx files only.

I've tried to add Object.entries polyfill by:

  1. Changing browserslist in package.json by adding IE 9, chrome >20, etc... - But to no avail (dist was not changed)
  2. Changing compilerOptions.target in tsconfig.json to es5 - But to no avail (dist was not changed)
  3. Adding to compilerOptions.lib in tsconfig.json new values: es5,es6,es7, etc... - But to no avail (dist was not changed)

Only adding import 'react-app-polyfill/stable'; gives me Object.entries polyfill, but with ~600kb of other polyfills :(

Questions:

  1. Is browserslist in create-react-app project uses ONLY for *.js files?
  2. Is there currently no way to use browserslist for auto-adding polyfills for compiling TypeScript project?
  3. Is browserslist completely useless for TypeScript project?
create-react-app webpack typescript reactjs
1 Answers

My main mistake:

When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. A quick solution is to delete the node_modules/.cache folder and try again.

rm -rf node_modules/.cache before build given completely different result.

Is browserslist in create-react-app project uses ONLY for *.js files?

Nope, this works with *.ts / *.tsx too.

Is there currently no way to use browserslist for auto-adding polyfills for compiling TypeScript project?

Polyfills does't includes by default, need to use react-app-polyfill

react-app-polyfill doc:

You can also polyfill stable language features not available in your target browsers. If you're using this in Create React App, it will automatically use the browserslist you've defined to only include polyfills needed by your target browsers when importing the stable polyfill.

user_20519380
Related