Uncaught ReferenceError: regeneratorRuntime is not defined 解決方法

作者: Calpa Liu
字數:769
出版日期:July 29, 2018
更新日期:December 7, 2023
分類: #前端開發
#JavaScript

async/await 能讓開發者享受異步操作的快感,解決回調地獄的問題。然而,編譯器對於 async/await 的編譯有時候卻不和我們想象中的一樣。透過安裝正確插件,或改回 Promise 版本,我們可以解決這個問題。

解決方法

之前在 Gatsbyjs async/await 更新報錯解決方法 就已經提及過,使用 babel-plugin-transform-runtime 就好了。

npm install --save-dev babel-plugin-transform-runtime

然後在 .babelrc 裡面填寫:

{
  "plugins": ["transform-runtime"]
}

或加入自定義選項:

{
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}

因為 Babel 會不斷更新,所以具體配置請到官網查閱,或點擊下面的鏈接。

其實你也可以使用babel-polyfill,不過它會包含 regenerator runtimecore-js,打包的體積會變得很大。

參考資料

  1. babel-plugin-transform-runtime - Babel
  2. babel-polyfill - Babel
感謝您閱讀我的文章。歡迎隨時分享你的想法。
關於 Calpa

Calpa 擅長使用 TypeScript、React.js 和 Vue.js 開發Responsive Web Design網站。

此外,Calpa 積極參與香港和台灣的開源社區,曾在2019年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過300顆星星和60個分支的支持。

更多前端開發技術文章:傳送門