未捕獲的 ReferenceError：RegeneratorRuntime 未在 React 中定義

Question

我收到錯誤“未捕獲的 ReferenceError：未定義 regeneratorRuntime”。 請幫助我找出錯誤以及如何解決它。

Answer 1

• 安裝運行時依賴

npm i --save-dev @babel/plugin-transform-runtime

• 將插件添加到 your.babelrc 文件

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

更多信息： https://babeljs.io/docs/en/babel-plugin-transform-runtime

TLDR；

• 異步函數是生成器之上的抽象。
• 現在所有主要瀏覽器和 Node10 及更高版本都支持異步函數和生成器。
• 如果您使用轉譯器（例如 babel）來實現向后兼容性，則需要一個額外的“層”來轉換生成器。 這意味着在運行時將 ES6 轉換為 ES5，因為它們的語法不向后兼容。 見https://cmichel.io/how-are-generators-transpiled-to-es5

Answer 2

謝謝 當我添加一個導入語句時它起作用了—— import regeneratorRuntime from "regenerator-runtime"; 在我使用異步/等待的組件中。

Answer 3

遇到了這個問題（使用 Babel v7），即使按照建議安裝了相關軟件包，我仍然無法獲得這個錯誤的 id。 檢查了以下堆棧溢出帖子...

• Babel 6 regeneratorRuntime 未定義
• Babel 7 - ReferenceError: regeneratorRuntime 未定義

以下行動有所幫助：

1. Go 到 package.json 並在“笑話”中添加以下內容（還添加了屏幕截圖）：

“模塊名稱映射器”：{
".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy" }

2. 運行測試時在命令中使用以下后綴...

--setupFilesAfterEnv "./src/setupTests.js"

所以要運行測試，它將是：

$ jest /pathToTest/TestFile.test.js --setupFilesAfterEnv "./src/setupTests.js"

希望它可以幫助像它幫助我的人...

Answer 4

如果您確實需要使用異步 function，那么上述解決方案應該可以工作。 解決此問題的另一種方法是使用常規承諾，至少在我的情況下是這樣。

Answer 5

只需添加

  "browserslist": [
    "last 2 Chrome versions"
  ]

在您的項目package.json文件的末尾，還看到它的復數瀏覽器不是瀏覽器！

你的文件最終可能看起來像這樣 ->

  },
  "dependencies": {
    "prop-types": "^15.8.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "browserslist": [
    "last 2 Chrome versions"
  ]
}

忽略上述代碼視圖中的依賴部分，它僅用於參考 package.json 的外觀。

Answer 6

2022

如果您使用的是 Babel 7 或更高版本，則不需要安裝額外的插件（ @babel/plugin-transform-runtime或@babel/plugin-transform-regenerator或其他插件）。

之后，每次使用async/await語法時都必須包含此語句。

import regeneratorRuntime from "regenerator-runtime";

也許如果您在項目中設置了一個 linter，它會警告您該語句已聲明但它的值從未被讀取，但我認為這只是一個錯誤，因為如果您刪除它，代碼將不起作用。