React-App-Polyfill ignores browserlist

[loren138]

Describe the bug

React-App-Polyfill seems to be ignoring the production browserlist from package.json and using some other browserlist instead.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

Read https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

Environment

  current version of create-react-app: 4.0.3
  running from /Users/loren/.npm/_npx/11376/lib/node_modules/create-react-app

  System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Edge: Not Found
    Firefox: 88.0.1
    Safari: 14.1.1
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 4.0.3 => 4.0.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app react-polyfill
2. yarn add react-app-polyfill
3. Edit src/index.js add import 'react-app-polyfill/stable'; as the first line
4. yarn build
5. npx source-map-explorer 'build/static/js/*.js' 101 kb of core-js is included
6. Change package.json browserlist to

   "browserslist": {
   "production": [
     "last 1 chrome version"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
   }

7. yarn build
8. Build is the same size and still includes 101kb of core-js

Expected behavior

Build should have only included 'web.immediate' matching

console.log(require('core-js-compat')({ targets: "last 1 chrome version", version: '3', filter: /^(es|web)\./ }).targets);
// Output: { 'web.immediate': { chrome: '91' } }

Actual behavior

Source Analysis:

Reproducible demo

Created with steps above: https://github.com/loren138/react-polyfill-bug

[sandgraham]

I think I see this in my project as well- a ton of core-js polyfills are included when only 2 or 3 would be used if I manually added in polyfills (for supported browsers).

[taoliujun]

I resolve it bellow

// do not use react-app-polyfill because it was require('core-js') which cannot remove unused polyfill.
// import 'react-app-polyfill/stable';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
`