React & Babel：你可能需要一个额外的加载器来处理这些加载器的结果

Question

Im working on a react app made with create-react-app , and whenever I start the app I get this error:

./node_modules/scrambles/dist/esm/scrambles.js 37:39
Module parse failed: Unexpected token (37:39)
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.
| 
| async function getWorker() {
>   const url = outsideStrategy.url.esm ?? outsideStrategy.url.cjs;
|   const workerInstantiator = outsideStrategy.workerInstantiator.esm ?? outsideStrategy.workerInstantiator.cjs;
|   let worker;

Here are my dependencies in package.json :

  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/node": "^15.3.0",
    "bulma": "^0.9.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "scrambles": "^0.1.13",
    "typescript": "^4.2.4",
    "web-vitals": "^1.1.2"
  },

Im not knowledgeable at all when it comes to bable , and based on the error, that seems to be a source of the issue. I have tried downgrading react-scripts as another post directed, but I had no luck with that. Any help is greatly appreciated; Ive been trying to fix this for hours.

Answer 1

It looks like this is a known issue with create react app and dependencies that use nullish coalescing. See this GitHub issue for more information https://github.com/facebook/create-react-app/issues/9468

One of the suggested fixes is to change your browserslist config in your package.json to this:

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

That may fix it for you because it'll change how Babel is transpiling your code. It looks like it's not transpiling any nullish coalescing because it's supported by the browserslist you're targeting.