browserslist with very new browsers, typescript template and ES2020 syntax in node_modules causes compilation error

[robcalcroft]

Describe the bug

With a typescript template, a browserslist config like ['last 2 chrome versions'] and syntax like ?? in the node_modules, webpack and babel loader throw the following error:

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

browserslist, babel

Environment

Environment Info:

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

System:
OS: macOS 11.5.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 14.17.6 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.15 - /usr/local/bin/npm
Browsers:
Chrome: 93.0.4577.63
Edge: Not Found
Firefox: Not Found
Safari: 14.1.2
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

(Write your steps here:)

1. Run create-react-app test --template typescript
2. Run npm i @encodable/dimension@1.0.0 --save to add a lib with ?? in the node_modules
3. Update the browserslist config in package.json to last 2 chrome versions
4. Add import {getMultipleTextDimensions} from '@encodable/dimension'; to App.tsx
5. Add the following at the top of the App function component

getMultipleTextDimensions({
    className: '123',
    texts: [],
});

6. Run npm run build

Expected behavior

The build would successfully complete and build compiled, minified JS

Actual behavior

The build failed with the following error:

Reproducible demo

https://codesandbox.io/s/elastic-feather-lmxsz?file=/package.json

In the demo, open the console and you can see the transform error:

[badsyntax]

I had similar problems and it looks like upgrading react-scripts to v5 fixes this. But beware! There's many breaking changes that come with v5 (as a result of webpack5). So while upgrading react-scripts will fix this, it's likely it will introduce other issues you'll need to resolve.

[manitotao]

I solved this issue by upgrading babel-loader to 8.2.3.