?? Operator results in "Unexpected Token" err when used in package

[arogozine]

Describe the bug

If you import a package that uses ?? operator in code, create react app will fail when debugging.

This issue seems to appear only when debugging with such a library. (npm run start)

It builds (npm run build) without errors. So the toolchain for start vs build is in question here.

The operator works fine if used directly - not in the imported library code.

Did you try recovering your dependencies?

Issues occurred with multiple CRAs even with reinstalling node modules.

Which terms did you search for in User Guide?

Null Coalescing Operator Create React App
There seems to be an issue about optional chaining.

Environment

Windows 10 10.0.17763
npm 6.14.5
node 14.4.0
Google Chrome was used to ensure async, let, const, classes, and ?? support.

Steps to reproduce

1. Create a React App with TypeScript (Haven't tried without TS)
2. Create NPM package (TS with target ESNext, module, commonjs, declaration) that uses the ?? operator
3. Use package in your app.
4. Run start script

Expected behavior

The application should compile and run successfully when started or when built..

Actual behavior

The application fails to compile due to the ?? in the library.

Failed to Compile,
Unexpected token
You may need an additional loader to handle the result of these loaders.

Reproducible demo

If needed I can brew something up. This was found in a work project.

[bitjson]

I'm encountering this issue too – here's a repo to reproduce: https://github.com/bitjson/bitauth-cra (npm install && npm start):

./node_modules/@bitauth/libauth/build/module/lib/template/compiler.js 112:37
Module parse failed: Unexpected token (112:37)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   }), {});
|   const entityOwnership = Object.entries(template.entities).reduce((all, [entityId, entity]) => ({ ...all,
>     ...Object.keys(entity.variables ?? {}).reduce((entityVariables, variableId) => ({ ...entityVariables,
|       [variableId]: entityId
|     }), {})

The nullish coalescing operator works as expected in App.js, the error only seems to occur when the operator appears in an external dependency. (Try replacing this block with console.log(undefined ?? "success!") to confirm.)

Does anyone have any tips for how to debug this issue?

[bitjson]

As another data point, the bitauth-ide repo is running react-scripts at version 3.4.1, and the same library (@bitauth/libauth) is being imported without any errors. I'm still trying to figure out where the difference is.

[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.

[bitjson]

For any TypeScript library authors having trouble with this, one workaround is to switch your compilation target from esnext to es2019. That will at least downlevel all nullish coalescing operators (??) so they don't trigger this bug.

[benknab]

Same error with react-scripts@3.4.3

[benknab]

Changing browser targets from

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

to

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

solved my issue.
I think #8445, #8526 could be related.
The issue is with aggressive browser targets like last 1 chrome version.

[arogozine]

EDIT: Does having last 1 version for production makes this fail to build? I need to only support modern browsers - and transpilation increases bundle size.

Looks like 4.0.0 was released - but hasn't been properly tested.

Anyone can confirm that 4.0.0 still doesn't work with ?? (with or without TS)?

[ajayvikas]

Still getting the error on 4.0.0

../dist/index.modern.js 88:119
Module parse failed: Unexpected token (88:119)
File was processed with these loaders:
 * ../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|   function numberMask(rawValue = emptyString, config) {
>     rawValue = clean(rawValue, options, (config === null || config === void 0 ? void 0 : config.currentCaretPosition) ?? -1);
|     let [integer, fraction] = rawValue.split(period);
|     const hasPeriod = rawValue.indexOf(period) > -1;

[jxanders]

I tried the browserslist workaround from @bkiac and it worked for me (I could build debug but not production, now I can do both.) I'm on node 12.18.4 and the build is working fine for me. Oddly enough, my coworker cannot build the project for debug or production.

We don't have react-scripts installed so it might be an issue unrelated to react-scripts

[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.