React에서 ES8 문법인 async/await를 사용해 비동기 함수를 작성하면 브라우저에서 다음과 같은 에러가 발생한다.
ReferenceError: regeneratorRuntime is not defined
애플리케이션이 컴파일될 때, regeratorRuntime
이 async/await 문법을 번역하도록 했는데 해당 regenerator를 제공하지 않아서 발생한 에러이다.
@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) andregenerator-runtime/runtime
(needed to use transpiled generator functions):
따라서 @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"]
}
아 진짜 너무 감사합니다.. ㅠㅠㅠㅠ express heroku에 배포하면서 해당 문제가 생겨서 하루종일 고생했는데 이게 원인이었네요.. 덕분에 해결했어요 ㅠㅠ 넘 감사합니다!!!!