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"
  },

对于Babel我一点也不懂，从错误来看它似乎是问题的源头。我尝试了降级react-scripts，但没有成功。非常感谢任何帮助；我已经花费几个小时试图修复这个问题。

- quinnmayo

Answer 1

看起来这是使用nullish coalescing依赖项的create react app已知问题。有关更多信息，请参见此GitHub问题https://github.com/facebook/create-react-app/issues/9468

其中一种建议的修复方法是更改您在package.json中的browserslist配置为：

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

如果你这样做，可能会解决你的问题，因为它将改变Babel如何转译你的代码。看起来它没有转译任何空值合并，因为它被你所定位的浏览器列表支持。

- kfoxb

---

这对我有用，但我还需要删除我的node_modules并重新安装所有东西。 - aboutaaron

是的...这对我也起作用了。 - janadari ekanayaka

horishet是一个奇迹！ - KD.S.T.

Answer 2

如果你正在使用Vue.js（在我的情况下是`v2.6.11`），将以下内容添加到我的`vue.config.js`中是唯一解决它的方法。

module.exports = {
    configureWebpack: {
        module: {
            rules: [{ test: /node_modules[\\/]@walletconnect/, loader: 'babel-loader' }],
        }
    }
  }

- steven2308