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": "A Vue.js project",
  "version": "1.0.0",
  "author": "v",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.7.0",

  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.18.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

.babelrc

{
  "presets": [
    ["env", { "modules": false }],
  ]
}

below is how I use async/await in my component

async mounted(){
            //this.$store.dispatch('loadImg', this.details.imgUrl).then((img) => {
                //this.drawImage(img);    
            //});

            var result = await this.loadImg();
            console.log(result);
        },
        methods:{
            async loadImg(){
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('yeah async await works!');
                    }, 2000);
                });
            }, 
         }

But when I run the app I get the error: ReferenceError: regeneratorRuntime is not defined and even the component is not being displayed

Possible duplicate of [Babel 6 regeneratorRuntime is not defined](https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined) — Michael Jungo, Sep 24 '17 at 11:17
In addition to the provided solutions, you can use the [`useBuiltIns` option of `babel-preset-env`](https://github.com/babel/babel-preset-env#usebuiltins). — Michael Jungo, Sep 24 '17 at 11:22

score 45 · Accepted Answer · answered Oct 13 '17 at 16:15

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.

Thanks. For Babel v. 7.0+ [@babel/plugin-transform-regenerator](https://www.npmjs.com/package/@babel/plugin-transform-regenerator) and [@babel/polyfill](https://www.npmjs.com/package/@babel/polyfill) should be used accordingly. — Scofield, Nov 26 '18 at 14:48

Quoc-Anh Nguyen · Answer 2 · 2018-04-30T16:54:08.257

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/

edited Apr 30 '18 at 16:54

answered Sep 25 '17 at 01:00

Quoc-Anh Nguyen

4,798
1
22
34

score 2 · Answer 3 · edited Dec 03 '21 at 08:48

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"
 ],
}

Edits that remove fluff [are fine](https://meta.stackoverflow.com/q/260776/6296561). Please refrain from further rollbacks. — Zoe, Dec 02 '21 at 17:19

score 2 · Answer 4 · answered May 08 '20 at 21:15

2

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'

answered May 08 '20 at 21:15

ScottyG

3,204
3
32
42

I believe your terminal example is installing older versions and should be: @babel/plugin-transform-regenerator and @babel/polyfill – Jared Chmielecki May 05 '21 at 14:32

score 0 · Answer 5 · edited Nov 18 '21 at 10:27

I have faced the same type of error and solved in this way that:

Step 1: Run this command

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

Because I used async/await in my code that is not supported or transferred to old JavaScript without polyfill plugin.

Step 2: Configure the webpack.config.js file

require('babel-polyfill');
        
module.exports = {
   entry: ['babel-polyfill', './src/main.js'],
   ...
}

Step 3: Update the .babelrc file with this code "plugins": ["transform-regenerator"] like below

{
      "presets": [
        ["env", { "modules": false }],
        "stage-3"
      ],
      "plugins": ["transform-regenerator"]
}

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

5 Answers5

Linked