[Vue warn]: Failed to resolve async component:
Similar to #56, but I do NOT use ES6 export in my .vue File.
It looks like this (actually this is the "official" Hello World component):
<template>
<p>{{ greeting }} World!</p>
</template>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
<script>
module.exports = {
data: function() {
return {
greeting: "Hello"
};
}
};
</script>
And I try to use it like this:
httpVueLoader.register(Vue, "hello.vue");
While the component does seem to be registered, when running my code I get this:
[Vue warn]: Failed to resolve async component: function() {
return new Component(name).load(url)
.then((component) => component.normalize())
.then((component) => component.compile())
.then((component) => {
const exports = component.script !== null ? component.script.module.exports : {};
if (component.template !== null) { exports.template = component.template.getContent(); }
if (exports.name === undefined) { if (component.name !== undefined) { exports.name = component.name; } }
exports._baseURI = component.baseURI;
return exports;
});
}
Reason: SyntaxError: Unexpected identifier
Any ideas?
You make exports a constant and then try to modify it?
Where do I try to modify it? Last code snippet is the error message VueJS throws at me, not my code. Anyways, I have a completely different solution now which works much better for me, i.e. I am transforming the .vue Files to ordinary ES6 modules - on the fly - directly on my dev server (using mod_sed). No more hoola hoop in the browser ;) So I won't be able to replicate my problem anymore. Maybe we can close this one?
Hi
I'm facing this issue while implementing in my jsp. I didn't used any import or export in my vue file.
vue.js:634 [Vue warn]: Failed to resolve async component: function() {
return new Component(name).load(url)
.then(function(component) {
return component.normalize();
})
.then(function(component) {
return component.compile();
})
.then(function(component) {
var exports = component.script !== null ? component.script.module.exports : {};
if ( component.template !== null )
exports.template = component.template.getContent();
if ( exports.name === undefined )
if ( component.name !== undefined )
exports.name = component.name;
exports._baseURI = component.baseURI;
return exports;
});
}
Reason: SyntaxError: Unexpected token export**
This is my vue component code attached below
**
**
<el-table id="left_table" ref="assignListTable" :data="left_tableData.filter(data => !left_search || data.name.toLowerCase().includes(left_search.toLowerCase()))" height="450px" empty-text="No records selected" highlight-current-row @current-change="handleSelectedRow" @row-dblclick="leftTableRowDblClick">
<el-table-column prop="name" label="Name" sortable>
</el-table-column>
<el-table-column prop="eyeColor" label="Eye Color" sortable>
</el-table-column>
<el-table-column prop="age" label="Age" sortable>
</el-table-column>
</el-table>
</div>
<div class="assign-btns">
<el-button size="mini" @click="moveItemToRight">></el-button><br />
<el-button size="mini" @click="moveItemToLeft"><</el-button>
</div>
<div class="right-tabDiv">
<el-input v-model="right_search" size="large" placeholder="Type name to search"/>
<el-table id="right_table" ref="assignListTable" :data="right_tableData.filter(data => !right_search || data.name.toLowerCase().includes(right_search.toLowerCase()))" height="450px" empty-text="No records selected" highlight-current-row @current-change="handleSelectedRow" @row-dblclick="rightTableRowDblClick">
<el-table-column prop="name" label="Name" sortable>
</el-table-column>
<el-table-column prop="eyeColor" label="Eye Color" sortable>
</el-table-column>
<el-table-column prop="age" label="Age" sortable>
</el-table-column>
</el-table>
</div>
</div>

Where do I try to modify it? Last code snippet is the error message VueJS throws at me, not my code. Anyways, I have a completely different solution now which works much better for me, i.e. I am transforming the
.vueFiles to ordinary ES6 modules - on the fly - directly on my dev server (usingmod_sed). No more hoola hoop in the browser ;) So I won't be able to replicate my problem anymore. Maybe we can close this one?
mind sharing your solution? sounds like the only real way to do it.
For what it's worth, I face this error as well, and can help in debugging or reproducing if someone takes the lead. Was scouting whether I could use httpVueLoader for streamlining the development experience (inspired by Snowpack).
Edit: I'm trying to load .vue components that use ESM import and also export themeselves as:
export default {
Not willing to give this up, since the project is very ESM based, as such. Is there any hope htppVueLoader would be up to the task, or should I look elsewhere?
Note: No burden. It's just that since the README doesn't explicitly mention about problems with ESM users, this may come as a late suprise. Maybe a mention there would be in place, if it's a project policy.
my solution https://github.com/FranckFreiburger/http-vue-loader/issues/94
Possible solution: remove the Lang attribute from the tags: template and style. I had a hard time finding this simple error. That's for using snippets