발단: regeneratorRuntime is not defined

React에서 ES8 문법인 async/await를 사용해 비동기 함수를 작성하면 브라우저에서 다음과 같은 에러가 발생한다.

ReferenceError: regeneratorRuntime is not defined

원인 분석: regenerator 누락

애플리케이션이 컴파일될 때, regeratorRuntime이 async/await 문법을 번역하도록 했는데 해당 regenerator를 제공하지 않아서 발생한 에러이다.

해결: @babel/runtime, @babel/plugin-transform-runtime 사용

@babel/polyfill - deprecated

@babel/polyfill을 사용해 해결했다는 글을 많이 찾아볼 수 있는데, 글을 작성하는 현재 @babel/polyfill를 설치하면 deprecated되었다는 경고가 뜬다.

> warning @babel/polyfill@7.12.1: 🚨 This package has been deprecated in favor of
separate inclusion of a polyfill and regenerator-runtime (when needed). See the
@babel/polyfill docs(https://babeljs.io/docs/en/babel-polyfill) for more information.

babel 7.4.0부터는 core-js/stable(ECMAScript 기능들의 polyfill 제공)과 regenerator-runtime/runtime (transpiled generator functions 사용을 위해 필요) 직접 포함하면서 @babel/polyfill이 deprecated되었다.

@babel/polyfill

🚨 As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

@babel/runtime, @babel/plugin-transform-runtime

따라서 @babel/polyfill이 아닌 @babel/runtime과 @babel/plugin-transform-runtime을 설치해 regenerator-runtime을 추가하는 방식으로 해결했다.

@babel/runtime

@babel/runtime is a library that contains Babel modular runtime helpers and a version of regenerator-runtime.

@babel/plugin-transform-runtime

A plugin that enables the re-use of Babel's injected helper code to save on codesize.

다음의 커맨드로 설치해주고

> npm install --save-dev @babel/plugin-transform-runtime
> npm install --save @babel/runtime

babel 설정에 plugin을 등록해주자.

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

참고 및 출처

• Async/Await with React, Webpack and Babel - 바로가기
• [Babel Docs] @babel/polyfill - 바로가기
• [Babel Docs] @babel/runtime - 바로가기
• [Babel Docs] @babel/plugin-transform-runtime - 바로가기