Vue-loader: async/await doesn't work in *.vue files

[ianberdin]

I have .babelrc and default vue-cli webpack template

{
  "presets": ["es2015", "stage-3"],
  "plugins": ["transform-runtime"],
  "comments": false
}

async/await work in *.js files, but not in *.vue

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/base/me
nu.vue
Module build failed: SyntaxError: Unexpected token (55:23)

> 55 |       var resp = await test()

webpack 2 config

module: {
    rules: [ 
       {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          loaders: {
            js: 'babel?presets[]=es2015,presets[]=stage-3,plugins[]=transform-runtime'
          },
          autoprefixer: true
        }
      }
    ]
}

"vue-loader": "^10.0.2",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-stage-3": "^6.17.0"

[LinusBorg]

Hello @happierall ,

thank you for your filing this issue.

Please follow the guidelines on how to report an issue. In particular, provide an example on www.jsfiddle.net (or a similar service) that reproduces the problem. If nessessary, create a repository for us to clone with a minimal reproduction. repositories of actual projects will generally not be accepted .

Thank you.

[ianberdin]

I found my mistake, thank you!

I did not know, that 'await' only for 'async' functions...
For sync functions can use foo.then().catch().

[sohailalam2]

FYI, just incase someone else stumbled upon it and was not able to use async/await with Vuejs projects (like me), here is what I did to get it working -

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._

Posted in https://stackoverflow.com/a/46734082/2074938

[z1haze]

I have a solution that works, after fighting this for hours.

do import 'regenerator-runtime/runtime'; as early as you can, in your entry file.

https://www.npmjs.com/package/regenerator-runtime