Using the async/await pattern in Vue.js

Question

I want to use the async/await pattern with my new Vue.js project. However, after my first try, it threw an error:

<template>
    <div>
        <table>
            <tr>
                <th>Test</th>
            </tr>
            <tr v-for="(value, name) in pickingList">
                <td>{{value}}</td>
            </tr>
        </table>
        s
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                pickingList: null,
                pickingZone: '1006'
            }
        },
        async created() {
            await this.getPickingList();
        },
        methods: {
            async getPickingList() {
                this.pickingZone = await this.$http.get("Picking/PickingZoneLists/" + this.pickingZone);
            }
        }
    }
</script>

This throws the folloring error:

webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Error in created hook: "ReferenceError: regeneratorRuntime is not defined"

found in

---> at src/views/Test.vue at src/containers/TheContainer.vue at src/App.vue warn @ webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896 ReferenceError: regeneratorRuntime is not defined at VueComponent.created (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Test.vue?vue&type=script&lang=js&:25) at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1862) at callHook (webpack-internal:///./node_modules/vue/dist/vue.esm.js:4216) at VueComponent.Vue._init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5001) at new VueComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5147) at createComponentInstanceForVnode (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3289) at init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3120) at merged (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3307) at createComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5973) at createElm (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5920)

After some research, I found a solution which suggested to install the following two babel plugins:

@babel/polyfill
@babel/plugin-transform-regenerator

I've installed them via npm and added them to my babel.config.js file:

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

After that, my page crashes immediately with an unspecific error page full of SocketExceptions and HttpRequestExceptions:

Failed to proxy the request to http://localhost:8081/mypage, because the request to the proxy target failed. Check that the proxy target server is running and accepting requests to http://localhost:8081/. The underlying exception message was 'Es konnte keine Verbindung hergestellt werden, da der Zielcomputer die Verbindung verweigerte.'.Check the InnerException for more details.

Were the two babel plugins even the right track? If yes, how can I fix the problem?

I also found this related post, but I don't have a webpack config file. Here's my vue.config.js:

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  configureWebpack: {
    //Necessary to run npm link https://webpack.js.org/configuration/resolve/#resolve-symlinks
    resolve: {
       symlinks: false
    }
  }
}

Finally, here's my package.json:

{
  "name": "@coreui/coreui-free-vue-admin-template",
  "version": "3.0.0-beta.3",
  "description": "Open Source Bootstrap Admin Template",
  "author": {
    "name": "CoreUI",
    "url": "https://coreui.io",
    "github": "https://github.com/coreui",
    "twitter": "https://twitter.com/core_ui"
  },
  "contributors": [
    {
      "name": "CoreUI Team",
      "url": "https://github.com/orgs/coreui/people"
    }
  ],
  "homepage": "http://coreui.io",
  "copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "clearCache": "jest --clearCache",
    "release": "npm-run-all clearCache lint build test:unit test:e2e"
  },
  "dependencies": {
    "@coreui/coreui": "^3.0.0-beta.4",
    "@coreui/icons": "^1.0.0",
    "@coreui/utils": "^1.0.0",
    "@coreui/vue": "^3.0.0-beta.4",
    "@coreui/vue-chartjs": "^1.0.2",
    "axios": "^0.19.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-transform-regenerator": "^7.8.3",
    "@babel/polyfill": "^7.8.3",
    "@vue/cli-plugin-babel": "^4.1.1",
    "@vue/cli-plugin-e2e-nightwatch": "^4.1.1",
    "@vue/cli-plugin-eslint": "^4.1.1",
    "@vue/cli-plugin-unit-jest": "^4.1.1",
    "@vue/cli-service": "^4.1.1",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "chromedriver": "^79.0.0",
    "core-js": "^3.4.8",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.0.1",
    "node-sass": "^4.13.0",
    "npm-run-all": "^4.1.5",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 9"
  ],
  "engines": {
    "node": ">= 8.10.x",
    "npm": ">= 5.6.0"
  }
}

created() doesn't need to be async btw, if there's nothing in the created lifecycle hook that is awating this.getPickingList() — Terry
How does the proxy error relate to your webpack config? Is there something running on port 8081? — jonrsharpe
Info: Webpack is configured with default values if no webpack config (or no configureWebpack section in vue.config.js) is present - cli.vuejs.org/guide/webpack.html — Tanner

Tanner Tanner · Accepted Answer · 2020-02-27T14:41:41

I found a relatively recent Medium post on this subject. @babel/polyfill is deprecated. You'll need to install @babel/runtime and @babel/plugin-transform-runtime, then make some changes to your babel.config.js:

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

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        // "absoluteRuntime": false,
        "corejs": false,
        // "helpers": true,
        "regenerator": true,
        // "useESModules": false
      }
    ]
  ]
}

Source Article: https://medium.com/@kishan020696/react-16-with-webpack-4-and-babel-7-part-2-edb34d78f695

Using the async/await pattern in Vue.js

1 Answers