`react-app-polyfill` not using `browerslist` in `package.json`

[jluxenberg]

Describe the bug

react-app-polyfill does not polyfill all of the required modules based on the browesrslist entry in package.json.

Specifically; if I use "chrome 97" as the target, the structuredClone function is not polyfilled.

I can see from core-js-compat that this function should be polyfilled for Chrome 97:

const compat = require('core-js-compat');
compat({ targets: ["chrome 97"], modules: ['core-js/stable'], inverse: false });

{
  list: [
...
    'web.structured-clone', /// <<<<<<<<<<<<<
...
  ],
  targets: {
...
    'web.structured-clone': { chrome: '97' },
...
  }
}

Did you try recovering your dependencies?

This reproduces on a fresh "create-react-app" project, see below reproduction instructions.

Environment

jared@Jareds-MBP cra-polyfill-bug % npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.1
  running from /Users/jared/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 114.0.1823.51
    Firefox: 114.0.2
    Safari: 16.0
  npmPackages:
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-scripts: 5.0.1 => 5.0.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app .
2. modify browerslist in package.json like this:

  "browserslist": {
    "production": [
      "chrome 97"
    ],
    "development": [
      "chrome 97"
    ]
  }

3. replace src/index.js with this:

import 'react-app-polyfill/stable';

console.log(structuredClone({"hello":"world"}));

4. run npm run build && serve -s build
5. open http://localhost:3000 using Chrome 97 (can download here https://chromium.cypress.io/mac/stable/97.0.4692.99)

Expected behavior

"{hello: 'world'}" should be printed in the console

Actual behavior

Instead I get this error:

Uncaught ReferenceError: structuredClone is not defined
    at index.js:3:9
    at main.332d284c.js:1:16142
    at main.332d284c.js:1:16146
(anonymous) @ index.js:3
(anonymous) @ main.332d284c.js:1
(anonymous) @ main.332d284c.js:1

Reproducible demo

Example project:

2023-07-10_cra-polyfill-bug.tgz

Run npm run build && serve -s build and then open http://localhost:3000 using Chrome 97 (can download here https://chromium.cypress.io/mac/stable/97.0.4692.99)

[jluxenberg]

Ah; it looks like structuredClone was added in version 3.20.x of core-js: https://github.com/zloirock/core-js/blob/master/packages/core-js-compat/src/modules-by-versions.mjs#L114

babel-preset-react-app will use the most recent version of core-js, however the @babel/preset-env is configured with corejs param set to the number "3". According to the @babel/preset-env docs:

[The corejs option] ensures @babel/preset-env injects the polyfills supported by your core-js version. It is recommended to specify the minor version otherwise "3" will be interpreted as "3.0" which may not include polyfills for the latest features. https://babeljs.io/docs/babel-preset-env#corejs

babel-preset-react-app should instead specify a minor version e.g. "3.31", and be periodically updated.