CODEWITHSUNDEEP
javascriptvue.jsvue-router
Codeformer
Codeformer

Reputation: 2300

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

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.

Upvotes: 0

Views: 3688

Answers (1)

Codeformer
Codeformer

Reputation: 2300

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>',
}

Upvotes: 1

Related Questions