React.js | regeneratorRuntime is not defined 에러

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

 

ReferenceError: regeneratorRuntime is not defined

 

 

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

 

때문에 아래와 같이 문제를 해결하겠다.

 

1. 먼저 관련된 babel들을 설치해주고,

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

 

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

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