Numeric separators break development mode

[MauricioRobayo]

Describe the bug

Numeric separators in node_modules after installing color@4.0.1 causes the app to break when running in development mode with npm start or yarn start.

Did you try recovering your dependencies?

Yes.

$  yarn --version
1.22.11

$  npm --version
7.21.1

Which terms did you search for in User Guide?

• Numeric separators
• Module parse failed: Identifier directly after number
• Babel loaders

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /home/rfmaj/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
  Binaries:
    Node: 14.17.5 - ~/.volta/tools/image/node/14.17.5/bin/node
    Yarn: 1.22.11 - ~/.volta/tools/image/yarn/1.22.11/bin/yarn
    npm: 7.21.1 - ~/.volta/tools/image/npm/7.21.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  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. Create a new app: npx create-react-app numeric-separators
2. Cd into the new created app: cd numeric-separators
3. Install color: yarn add color@4.0.1 (latest version atm)
4. Import color in src/App.js: import Color from 'color' (example)
5. Start development mode with yarn start
   Note: Building the app with yarn build works fine.

Expected behavior

App starts normally in development mode.

Actual behavior

App fails to compile with following error:

Failed to compile.

./node_modules/color/index.js 246:28
Module parse failed: Identifier directly after number (246:28)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     for (const [i, element] of rgb.entries()) {
|       const chan = element / 255;
>       lum[i] = chan <= 0.039_28 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
|     }
|

Reproducible demo

Example project: https://github.com/MauricioRobayo/numeric-separators-issue

Steps to reproduce it:

1. Clone the repo: git clone https://github.com/MauricioRobayo/numeric-separators-issue
2. cd into the repo: cd numeric-separators-issue
3. Install dependencies: yarn
4. Start the app in development mode: yarn start

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.