React project compilation failing due to development browserlist

Question

Our project uses react 16 and was created using create-react-app. By default, the browserslist in package.json is as below.

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

With this configuration, when I try to compile the project, it fails and throws an error as shown below

I have gone through few articles on how to fix this and I was able to make it compile by updating the browserslist to the following.

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

But I could not understand how this was fixing the issue, since the last versions of the browsers are a subset of the configuration I was using in production.

How come having a smaller subset of target browsers causes an issue while having a larger set of browsers don't. Could someone please explain if I am missing something here.

Answer 1

If you project runs React 16.x, I guess it was created some time ago like 2019 or 2020.

Besides, the Nullish coalescing operator (??) was released in 2020. So I see a chance that the webpack version you use doesn't support the nullish operator.

I would suggest the following steps:

• remove the e.selected ?? !0 and replace it with e.selected == undefined || e.selected === null ? true : e.selected
• try to run the project
• if it builds, either remove all the occurences to ?? and other modern operators OR upgrades the scripts.