regeneratorRuntime

어떤 오류인가

아마 Webpack, parcel 등의 번들러를 사용하다가 지원하지 않는 문법을 만나면 이런 에러가 발생하는 듯하다

나의 경우에는 parcel로 돌리다가 async / await를 사용했을 때 발생하였다

해결 방법

해결 방법에는 여러 가지가 존재한다

import

최신 문법을 지원하지 않아서 발생하는 에러이니 바벨을 사용해서 폴리필을 해주면 된다

npm install @babel/plugin-transform-runtime 로 설치해준 뒤에

entry가 되는 js파일이나 해당 해당 문법을 사용하고 있는 js의 상단에 import 해주면된다

import '@babel/plugin-transform-runtime'

babelrc

블로그를 전전하다 보니 위의 방법은 전역 스코프가 오염될 수 있다고 한다

그를 방지하기 위해서는 따로 .babelrc파일을 설정해주면되는데 만들어 두기만하면 webpack이나 parcel이 자동으로 내부의 설정을 읽는다

//.babelrc
{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true
      }
    ]
  ]
}

설정값은 공식 doc에 자세히 설명되어있다

browserslist

package.json 에 browserlist 설정을 추가해주면된다

"browserslist": [
  "last 1 Chrome version"
]

browserslist?

browserslist는 바벨 폴리필의 target 옵션기능만 따로 뽑아놓았다고 생각하면 된다

내가 사용할 브라우저를 설정하면 그에 맞는 바벨 설정을 해준다