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

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

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

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

这可能会为你解决这个问题，因为它会改变 Babel 编译你的代码的方式。 看起来它没有转换任何无效的合并，因为它受到您所定位的浏览器列表的支持。