webpack - babel 설정, regeneratorRuntime 에러

webpack 설정 시에 발생하는 대표적인 에러인 regeneratorRuntime 에 대해 다루어보겠습니다.

 

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

async/await 함수 호출 예시

import axios from 'axios'

export async function test() {
	const resposne = await axios.get(
		'https://api.hnpwa.com/v0/news/1.json'
	);
	console.log(resposne.data);
	return resposne.data;
}

 

async/await 지시어를 써서 정상적으로 비동기 api를 호출하기 위해서 babel을 설정해야합니다.

우선 아래의 바벨 라이브러리를 설치합니다.

 

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

 

 

webpack 설정이 완료되어있고 다음과 같은 @babel @babel/core @babel/preset-env 등의 바벨 라이브러리가 설치되어있다면, 

프로젝트 내에 babel 설정파일(.babelrc)이 있을 것입니다. (없다면 직접 만드시면 됩니다.)

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env" 
      ,{}
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

babel 설정파일(.babelrc)의 plugins 에 @babel/plugin-transform-runtime 를 추가하면 됩니다. 

webpack 에 설정되어있는 바벨이 @babel/plugin-transform-runtime 플러그인을 통해서 자동으로 ES8 문법을 사용가능하게 해줍니다.

 

webpack 설정 파일에 있는 babel 설정입니다.

참고하시면 좋을 것 같습니다.

// webpack.config.js

const path = require("path");
const webpack = require("webpack");
...

const config = {
...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
...
}

 

 

 

https://velog.io/@haebin/React-regeneratorRuntime-is-not-defined-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0

[React] regeneratorRuntime is not defined 에러 해결

 

바벨 설정 참고 사이트

https://www.daleseo.com/js-babel-node/ 

Node.js로 ES6 코드 실행하기 (Babel)

 

https://defineall.tistory.com/646 

[Node.js] Babel (바벨) 이란? / 사용법