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 編譯你的代碼的方式。 看起來它沒有轉換任何無效的合並，因為它受到您所定位的瀏覽器列表的支持。