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 一无所知，根据错误，这似乎是问题的根源。我曾尝试按照另一个 post 的指示将 react-scripts 降级，但我没有成功。任何帮助是极大的赞赏;几个小时以来我一直在努力解决这个问题。

Answer 1

这似乎是一个已知问题，与使用无效合并的 create React 应用程序和依赖项有关。有关详细信息，请参阅此 GitHub 问题 https://github.com/facebook/create-react-app/issues/9468

建议的修复方法之一是将 package.json 中的浏览器列表配置更改为：

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

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

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

React & Babel: You may need an additional loader to handle the results of these loaders

javascript

reactjs

create-react-app