如何避免 regeneratorRuntime 錯誤 ? | 點燈坊

實務上難免會使用 async await，若使用 Babel + Node，在 Development 環境沒事，但在 Production 環境會遇到 regeneratorRuntime 錯誤，這該怎麼解決呢 ?

Version

macOS Catalina 10.15.3
WebStorm 2019.3.3
Node 12.4.0
Babel 7.6.4

Async Await

let inc = async x => x + 1

let data = [1, 2, 3]

let f = async arr => {
  let sum = 0

  for (let x of arr) {
    sum += await inc(x)
  }

  return sum
}

f(data).then(console.log)

很典型的 async await 寫法，在 develop 環境下使用 babel-node 執行沒事，但 production 環境下以 node 執行 dist 目錄下 *.js 會出現以下錯誤。

plugin-transform-runtime

$ yarn add @babel/runtime
$ yarn add @babel/plugin-transform-runtime --dev

其中 @babel/runtime 為 production 使用，而 @babel/plugin-transform-runtime 為 development 使用。

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/transform-runtime"
  ]
}

在 .babelrc 設定使用 @babel/transform-runtime。

Conclusion

• 在前端使用 Vue + Babel 不會遇到這個問題，只有在後端 Node + Babel 才會遇到

Reference

stackoverflow, Babel 6 regeneratorRuntime is not defined
Babel, @babel/plugin-transform-runtime