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

Question

我正在开发一个用 制作的反应应用程序create-react-app，每当我启动该应用程序时，我都会收到此错误：

./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;

这是我的依赖项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"
  },

我对此一无所知bable，并且根据错误，这似乎是问题的根源。我曾尝试react-scripts按照另一篇文章的指示降级，但没有成功。任何帮助是极大的赞赏; 我已经尝试解决这个问题几个小时了。

Answer 1

看起来这是 create React 应用程序和使用 nullish 合并的依赖项的一个已知问题。有关更多信息，请参阅此 GitHub 问题https://github.com/facebook/create-react-app/issues/9468

\n

建议的修复方法之一是将 package.json 中的 browserslist 配置更改为：

\n

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

\n

这可能会为你解决这个问题，因为它\xe2\x80\x99会改变 Babel 转译代码的方式。看起来它\xe2\x80\x99s 没有转译任何无效合并，因为它\xe2\x80\x99s 受到你\xe2\x80\x99 目标浏览器列表的支持。

\n