Vue Router - Failed to resolve async component after reloading page

Question

I am using lazy load method to create an backend SPA.

Everything is working smoothing when I navigate the link. Whenever I go to the certain page and reload the it, then Vue will prompt me some error messages.

Uncaught SyntaxError: Unexpected token <

app.js:144 Error: Loading chunk 10 failed.
    at HTMLScriptElement.onScriptComplete (app.js:98)

[vue-router] Failed to resolve async component default: Error: Loading chunk 10 failed.

[vue-router] uncaught error during route navigation:

app.js:15254 Error: Loading chunk 10 failed.
    at HTMLScriptElement.onScriptComplete

This is how my script looks like

const Home = (resolve) => require(['../components/Home.vue'], resolve)
const Category = (resolve) => require(['../components/Category.vue'], resolve)
const CategoryEdit = (resolve) => require(['../components/CategoryEdit.vue'], resolve)
const Register = (resolve) => require(['../components/Register.vue'], resolve)

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/', component: Home },
        { path: '/home', component: Home },
        { path: '/category', component: Category },
        { path: '/category/edit/:id', component: CategoryEdit },
        { path: '/company/register', component: Register }
    ]
});

const nav = new Vue({ 
    router,
    components : {
        Home,
        Category,
        CategoryEdit,
        Register
    },
    ...
}).$mount('#app')

I recorded an GIF for better explanation. https://i.sstatic.net/vXdpC.jpg

I'm having the same issue! Any solution?

lmgonzalves
– lmgonzalves

2017-07-11 23:29:58 +00:00
Commented Jul 11, 2017 at 23:29 — lmgonzalves
– lmgonzalves, Commented Jul 11, 2017 at 23:29

Gomah · Accepted Answer · 2017-12-19 16:16:11Z

12

What's your webpack configuration?

You probably need to set a public path in your output object:

output: {
  path:'/dist',
  filename: '[name].js',
  chunkFilename:'js/[id].[chunkhash].js',
  publicPath: '/',
},

edited Dec 19, 2017 at 16:16

answered Aug 20, 2017 at 0:08

Gomah

6918 silver badges10 bronze badges

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

2 Comments

ShadowGames Over a year ago

I wonder how this is done in 2023 where Vite is more and more commonly used.

Mpwanyi Samuel Over a year ago

I had the same issue, thanks. However, you need to double check that the value for public path set / in this case matches with the vue router base value. In this case, you should also set the router base to '/'

Morty · Accepted Answer · 2018-04-13 08:46:20Z

0

I have solved this question! You should change

const Register = (resolve) => require(['../components/Register.vue'], resolve)

to

const Register = (resolve) => require(['../components/Register.vue'], m => resolve(m.default))

answered Apr 13, 2018 at 8:46

Morty

1

Comments

4givN · Accepted Answer · 2019-11-20 16:11:33Z

-1

I faced the same issue, and what resolved mine is just to rebuild yarn or npm (hope this helps others):

yarn run dev
# OR
yarn run watch

answered Nov 20, 2019 at 16:11

4givN

3,2922 gold badges26 silver badges56 bronze badges

Collectives™ on Stack Overflow

Vue Router - Failed to resolve async component after reloading page

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related