vue-router : Failed to resolve async component default: SyntaxError: Unexpected token <

Question

I keep getting this error while trying Vue component import with Vue router.

Here is my main_app.js:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Home = { template: '<div>Home</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  {
    path: '/home',
    component: () => import('./list.vue')
  }
]
const router = new VueRouter({
  routes, 
  // mode: 'history'
})

const app = new Vue({
  router
}).$mount('#app')

And this is my list.vue:

<template>
    <div id="right"></div>
</template>

<script>
    export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    }
}
</script>

Tried making this change but its not working and I reverted.

const router = new VueRouter({
  routes, // short for `routes: routes`
  // mode: 'history'
  output: {
    path: '/js',
    filename: '[name].js',
    chunkFilename: 'js/[id].[chunkhash].js',
    publicPath: '/',
  },
})

Thank you.

Are you able to use dynamic import otherwise? Because if you are using babel, this plugin is required for syntax parsing link — ambianBeing
– ambianBeing, Commented Aug 17, 2019 at 11:30

Andrew Vasylchuk · Accepted Answer · 2019-08-18 08:40:33Z

1

For now, I tried this and it worked. Not sure if this is the perfect solution.

I changed the code to this.

list.vue

export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    },
    template: '<template>    <div id="right"></div> </template>',
}

edited Aug 18, 2019 at 8:40

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

answered Aug 18, 2019 at 3:16

Codeformer

2,37010 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue-router : Failed to resolve async component default: SyntaxError: Unexpected token <

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related