[Vue warn]: Failed to resolve async component: #66

alphanull · 2019-03-23T18:47:50Z

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?

The text was updated successfully, but these errors were encountered:

Anachron · 2019-04-28T08:16:07Z

You make exports a constant and then try to modify it?

alphanull · 2019-04-30T19:07:48Z

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?

janakiramgupta · 2019-09-17T09:27:13Z

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>

gaby64 · 2019-12-17T22:37:00Z

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?

mind sharing your solution?
sounds like the only real way to do it.

akauppi · 2020-04-24T09:38:41Z

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.

gaby64 · 2020-04-24T14:16:49Z

my solution #94

anyjaim · 2021-05-23T21:55:48Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Vue warn]: Failed to resolve async component: #66

[Vue warn]: Failed to resolve async component: #66

alphanull commented Mar 23, 2019

Anachron commented Apr 28, 2019

alphanull commented Apr 30, 2019

janakiramgupta commented Sep 17, 2019

gaby64 commented Dec 17, 2019

akauppi commented Apr 24, 2020 •

edited

Loading

gaby64 commented Apr 24, 2020 •

edited

Loading

anyjaim commented May 23, 2021 •

edited

Loading

[Vue warn]: Failed to resolve async component: #66

[Vue warn]: Failed to resolve async component: #66

Comments

alphanull commented Mar 23, 2019

Anachron commented Apr 28, 2019

alphanull commented Apr 30, 2019

janakiramgupta commented Sep 17, 2019

Hi

I'm facing this issue while implementing in my jsp. I didn't used any import or export in my vue file.

This is my vue component code attached below

gaby64 commented Dec 17, 2019

akauppi commented Apr 24, 2020 • edited Loading

gaby64 commented Apr 24, 2020 • edited Loading

anyjaim commented May 23, 2021 • edited Loading

akauppi commented Apr 24, 2020 •

edited

Loading

gaby64 commented Apr 24, 2020 •

edited

Loading

anyjaim commented May 23, 2021 •

edited

Loading