using async/await with webpack-simple configuration throwing error: RegeneratorRuntime not defined

In order to use await/async you will need to install a couple of Babel dependencies. This works with Vuejs project -

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

Once installed, you will need to modify your .babelrc file to use the plugin as follows -

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

and also your webpack.config.js file to use the regenerator as follows -

require("babel-polyfill");

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

Make the necessary changes according to your project structure and filename etc.


To use async & await, you should add 2 plugins to your babel config: https://babeljs.io/docs/plugins/transform-async-to-generator/ and https://babeljs.io/docs/plugins/syntax-async-functions/


Sohail's solution works. I had an async function, which ended up throwing the error...

To be sure, I used the vue-cli to build my project. As such, I have a vue.config.js, which on compile time injects content into webpack.config.

(Info on that can be found here)

So, in vue.config.js I have the following:

module.exports = {
configureWebpack: {
    entry: ['@babel/polyfill', './src/main.ts'],
    plugins: [
    ]
},
chainWebpack: config => {
    config.resolve.alias.set('@image', path.resolve(__dirname, 'public/img'));
    config.resolve.alias.set('@dev', path.resolve(__dirname, 'dev-server'));
},

}

Then, in babel.config.js I have this:

module.exports = {
 presets: [
   '@babel/env',
 ],
 plugins: [
  "transform-regenerator"
 ],
}

I hope this helps!