[Vue warn]: Failed to resolve async component:

[alphanull]

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?

[Anachron]

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

[alphanull]

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]

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

**

** 

[gaby64]

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]

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]

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

[anyjaim]

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