[Vue] throwing error: RegeneratorRuntime not defined

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

오늘은 vue-cli를 사용하여 webpack-simple 템플릿을 사용한 프로젝트에서, async와 await 키워드를 사용하였을 때 발생하는 에러인 "RegeneratorRuntime not defined"를 해결하는 방법에 대해 알아보겠습니다.

babel module install

npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-regenerator

터미널 혹은 콘솔창에 위의 명령어를 각각 입력하여 "babel-polyfill"과 "babel-plugin-transform-regenerator"모듈을 설치합니다.

babel.lrc modify

{
    ...
    "plugins": ["transform-regenerator"]
    ...
}

프로젝트 폴더 내의 babel.lrc파일을 열어, "plugins"키에 "transform-regenerator"를 추가합니다.

webpack.config.js modify

require("babel-polyfill");

module.exports = {
    entry: ["babel-polyfill", ...]
    ...
};

프로젝트 폴더 내의 webpack.config.js파일을 열어, "babel-polyfill"모듈을 import하고, "entry"키의 값에 "babel-polyfill"을 추가합니다.

rebuild

npm run dev

vue 프로젝트를 리빌드해줍니다.

참고 : stackoverflow