Vue router production build throws Uncaught SyntaxError

Question

I'm having trouble with the production build of my Vuejs app. I'm using the npm run build command for creating the production build and serve -s dist to run the build. Vue router is implemented and works fine for every path except for one which is parameterized(product). My index.js:

export default new Router({
  routes: [
    {
      path: '/',
      component: Layout,
      children:[
        {
          path:'/',
          component:Home,
          name:'Home'
        },
        {
          path:'/shop',
          component:Shop,
          name:'Shop'
        },
        {
          path:'/product/:id',     // navigating to this one throws the error
          component:Product,
          name:'Product'
        },
        // ...
      ]
    }
  ],
  mode:'history'
}

The error looks like this Uncaught SyntaxError: Unexpected token '<' and occurs in the manifest.xxx.js, vendor.xxx.js and app.xxx.js. I inspected the source code of those js files but couldn't find a '<' which is out of place. If I run the dev server using npm run dev, this error doesn't occur.

Does anyone have an idea what might cause this behavior? Thanks in advance for your help!

For some reason, a request that is supposed to return JS is instead responding with HTML. Please answer these **three** questions... What full URL are you loading in your browser? What full URL is it attempting to load for one of these failing `.js` files (use your browser dev-tools _Network_ tab). Have you customised any paths in `vue.config.js`? — Phil, Oct 27 '20 at 00:59
hey, I'm loading the URL http://localhost:5000/product/1 in the browser. For the .js files the URL looks like this: ```http://localhost:5000/product/static/js/manifest.37a2ecbb1d1b7e6c9ada.js```. This path doesn't exist, I think that's the problem. I did modify the ```vue.config.js``` so that the publicPath is "" instead of "/" for the ```npm run build``` to put the correct paths into the index.html — Fabian Witeczek, Oct 27 '20 at 01:16
That's your problem then. You can't use `""` (a relative path) when using HTML5 history mode. See the warnings here ~ https://cli.vuejs.org/config/#publicpath. Why did you set it to `""`? — Phil, Oct 27 '20 at 01:20

score -1 · Answer 1 · answered Oct 27 '20 at 00:21

-1

Well this one is tricky, But try removing the last coma (,) from the product object and see.

Another thing to check is if the product component is receiving the params for the id (:id) in the url.

And lastly, try and add a redirect to the layout object.

{ path: "/", redirect: "/dashboard", name: "Home", component: Main, children: [ { path: "/dashboard/:tab?", name: "Dashboard", component: Dashboard, },

answered Oct 27 '20 at 00:21

DevStress

20
1
3

I don't quite get what you mean with the redirect to the layout object. Do you mean in the parent object? Could you explain? – Fabian Witeczek Oct 27 '20 at 01:03

score -1 · Answer 2 · answered Oct 27 '20 at 00:25

-1

 { 
     path: "/", 
     redirect: "/dashboard", 
     name: "Home", 
     component: Main, 
     children: [ 
       { path: "/dashboard/:tab?", 
         name: "Dashboard", 
         component: Dashboard, 
       }
     ]
}

answered Oct 27 '20 at 00:25

DevStress

20
1
3

Vue router production build throws Uncaught SyntaxError

2 Answers2