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

Question

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

./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 转译您的代码的方式。看起来它没有转换任何无效的合并，因为它受到您所定位的浏览器列表的支持。