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

Question

I am using webpack-simple template with following configurations:

package.json

{
  \"name\": \"vue-wp-simple\",
  \"description\":          


        

Answer 1

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.

Answer 2

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!

Answer 3

I simply got async functions working by:

1) Use VUE CLI or terminal to install the following dev dependancies

In Vue CLI

example in terminal:

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

2) Then in my main.js file (or file where you create your vue object (new Vue) I added the following import

import '@babel/polyfill'

Answer 4

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/