Uncaught ReferenceError: regeneratorRuntime is not defined 解決方法

前言

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 runtime 及 core-js，打包的體積會變得很大。

參考資料

關於 Calpa Liu

Calpa 是一個四天工作的系統架構師，日常幫助客戶構建一站式網站應用，手機應用，雲端架構。

2023 年 9 月，Calpa 收到來自國內外不同 Web3 團隊的邀請，參加韓國的 KBW 2023 和新加坡的 TOKEN 2049 活動。十二月份，Calpa 將參加台北區塊鏈週的 Hackathon 比賽。

Calpa 擅長運用各種前沿技術，包括 TypeScript、React.js 和 Vue.js，開發具有 Responsive Web Design 的網站。另外，他透過運用 aws-cdk 和 TypeScript 技術的融合，實現了基於雲端的「基礎即代碼」（Infrastructure as Code）部署策略，建立了多套高效且具有可伸縮性的全端架構。

同時，Calpa 積極參與各個社群，活躍於香港和台灣的開源社區，分享前沿知識。他曾在 2019 年的香港開源大會中擔任重要講者，為聽眾提供寶貴的工作經驗和深刻見解。此外，Calpa 在 GitHub 上公開分享了個人博客程式碼，已獲得超過 300 顆星星和 60 個分支。

如果您對系統架構有任何問題，或需要進一步交流，請隨時聯絡 Calpa，他非常歡迎討論。