create-react-app: upgrading to react-script 3.3.1 breaks optional chaining

Since upgrading to react-scripts 3.3.1 my code, which uses optional chaining, fails to compile.

Module parse failed: Unexpected token (22:12)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/eslint-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|   // library barfs if you have an undefined value here instead of an empty array
|
>   if (props?.SelectProps?.multiple && field.value === undefined) {
|     field.value = [];

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 23
Comments: 17 (11 by maintainers)

Most upvoted comments

This issue is still present on 3.4.0.

hanneswidrig on Feb 15, 2020

@ggascoigne I encountered the same problem when upgrading to 3.3.1. I was able to resolve the issue and stay on 3.3.1 by deleting my node_modules folder and reinstalling my dependencies.

I don’t understand the underlying issue but sharing this info in case it helps others.

lnhrdt on Feb 9, 2020

@lnhrdt removing node_modules works for me. Thanks.

yilinjuang on Feb 9, 2020

It should live at node_modules/.cache. Hopefully that’s still the case. We’ve documented it in our docs to help out: https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers.

I haven’t had a chance to verify this in-depth, so would appreciate to get additional verification from you folks before we restore the plugins. Thanks! 😄

ianschmitz on Feb 19, 2020

Same issue here. Removing node_modules did not help.

We’re ejected, though, so I added @babel/plugin-proposal-nullish-coalescing-operator to our .babelrc file myself, then it started working again.

lvpro on Feb 10, 2020

@ianschmitz - Sure, here’s my package-lock.json: https://gist.github.com/justingrant/cb9b3c088f90abd8382141ebe608f141

In case it’s helpful, here’s my package.json too (with private stuff removed): https://gist.github.com/justingrant/194b21ccea3510ee8ef972c0cd9d8ca4

FWIW, I tried rebuilding my node_modules and that didn’t fix the problem. I get the same problem on 3.3.1 and 3.4.0.

Also, while researching this problem I found a similar issue in the webpack repo: https://github.com/webpack/webpack/issues/10227. I’m not sure if this is the same root cause because that issue uses ts-loader for typescript but my app uses babel. But at least wanted to capture it here to save others some Googling in case it’s related. That repro seems to depend on target: "ESNext", which made me wonder if it could be related to my dev-mode browserslist config in package.json:

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

Here’s two other issues which I came across which also might be (or might not be!) related to this issue:

justingrant on Feb 19, 2020

Removing node_modules did not work for me. Our project is not ejected.

PatrickZGW on Feb 12, 2020