Implementing the async/await pattern in my new Vue.js project has been a challenge. During my initial attempt, an error was thrown:
<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>
The error message I received was as follows:
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)
In an attempt to resolve this issue, I came across a solution suggesting the installation of two specific Babel plugins:
- @babel/polyfill
- @babel/plugin-transform-regenerator
After installing them using npm and updating my babel.config.js file with the necessary configurations:
module.exports = {
presets: [
['@babel/preset-env']
],
plugins: [
['@babel/polyfill'],
['@babel/plugin-transform-regenerator']
]
}
However, following these changes, the page started crashing immediately, displaying a vague error page filled with 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.
I began to question if the chosen Babel plugins were indeed the right approach. If so, what steps can be taken to tackle this problem?
Additionally, I stumbled upon a related post here, which references the need for a webpack config file. However, here are the contents of 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, included below is my package.json for reference:
{
"name": "@coreui/coreui-free-vue-admin-template",
"version": "3.0.0-beta.3",
...
}