http-vue-loader icon indicating copy to clipboard operation
http-vue-loader copied to clipboard

[Vue warn]: Failed to resolve async component:

Open alphanull opened this issue 6 years ago • 7 comments

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?

alphanull avatar Mar 23 '19 18:03 alphanull

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

Anachron avatar Apr 28 '19 08:04 Anachron

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?

alphanull avatar Apr 30 '19 19:04 alphanull

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

**

janakiramgupta avatar Sep 17 '19 09:09 janakiramgupta

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.

gaby64 avatar Dec 17 '19 22:12 gaby64

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.

akauppi avatar Apr 24 '20 09:04 akauppi

my solution https://github.com/FranckFreiburger/http-vue-loader/issues/94

gaby64 avatar Apr 24 '20 14:04 gaby64

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

anyjaim avatar May 23 '21 21:05 anyjaim