[Webpack] regeneratorRuntime is not defined 에러 해결

웹팩 설정이 다 된 줄 알았는데

async, await 문법을 사용하니까 regeneratorRuntime is not defined 에러가 발생했다.

recoil에서 내부적으로 aysnc/await을 사용하는 코드가 있는건지
recoil을 사용할 때도 같은 이슈가 발생했다.

 

1) 바벨 transform-runtime 플러그인과 바벨 런타임을 설치하고
(yarn)

yarn add -D @babel/plugin-transform-runtime @babel/runtime

(npm)

npm i -D @babel/plugin-transform-runtime @babel/runtime

 

2) webpack config에 플러그인을 추가해서 해결할 수 있었다.

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            options: {
                presets: [
                    '@babel/preset-env',
                    '@babel/preset-react'
                ],
                plugins: [
                    '@babel/transform-runtime'
                ]
            }
        ...

참고 : Async-Await-with-React