vue-router history mode on mac (localhost) throwing error on direct access

Question

I'm testing out vue-router's history mode on localhost development, and I'm getting an error when I try directly access the URL: http://localhost:8080/map/2. When I get to the URL via a $router.push of some kind, it behaves correctly. I'm wondering what may be causing this issue.

router/index.js

import Vue from "vue"
import Router from "vue-router"

const PublicMap = () => import("@/components/PublicMap/index.vue")

Vue.use(Router)

var routes = [
    {
        component: PublicMap,
        name: "map",
        path: "/map/:_id",
    },
]

export default new Router({
    routes,
    mode:
        "history"
})

Error:

Uncaught SyntaxError: Unexpected token <

By "directly access", does that mean you entered the URL manually into the address bar? Also can you please post the `PublicMap` component here. — Yom T., May 31 '19 at 04:15
This should be more related to your server configuration. You should make it always return your index.html — Slim, May 31 '19 at 10:35
@Slim yeah, I'm not sure which part of Vue does that. I'm using Vue-cli3 and they said don't modify `historyApiFallback` — A. L, May 31 '19 at 11:00
@MattOestreich that is the full error. Nothing on the terminal either. — A. L, Jun 03 '19 at 22:42
Nothing is wrong with that code. The syntaxerror should be from index.vue. — Kubwimana Adrien, Jun 04 '19 at 14:25
is your app a PWA? maybe this is causing the error, https://stackoverflow.com/questions/55155359/unexpected-token-on-every-new-build-of-angular-production-pwa-until-site-ref, see the answers on this post — blinkofaneye, Jun 04 '19 at 18:34
that might have been the case tbh. I started with PWA but then dropped it because it was causing some issues. Maybe there was some remnant problem — A. L, Jun 04 '19 at 21:57
Because of you miss a hash sign in the url: http://localhost:8080/#/map/2 — Maksim Tikhonov, Jun 07 '19 at 15:56

score 2 · Answer 1 · answered Jun 08 '19 at 12:42

2

When you receive an Uncaught SyntaxError: Unexpected token <, it usually means your transpiler has hit an element tag '<' in a file it is not set up to transpile.

When using Vue, this is usually a <script> tag in a xyz.vue single file component library.

If you used PWA, a file or setting might be cached. I would first try a different browser that has not visited the page to see if it is a caching issue. If it works in a different browser, try a hard refresh, or unregister the service worker for page's web app.

If it fails in another browser, I would look into your webpack and/or vue config files.

answered Jun 08 '19 at 12:42

Steven Spungin

27,002
5
88
78

it only occurs during history mode. Hash mode works perfectly fine. – A. L Jun 08 '19 at 17:31
What are you using to serve the url? – Steven Spungin Jun 08 '19 at 18:09
just localhost. The documentation said that it should work in both hash and history mode without any modifications. – A. L Jun 09 '19 at 00:13
But are you using the vue-cli server, webpack-dev-server, etc. What application is serving your content? You can't use history mode by just opening a file on your drive. There needs to be a fallback URL. – Steven Spungin Jun 09 '19 at 03:06
just using vue-cli3, and running `npm start`. So basically, the history routing works, if I get redirected through a `RouterLink` html tag, but doesn't work if it directly access it (i.e. punch it via the url bar) – A. L Jun 09 '19 at 04:43
yeah, some issue probably messed up with I decided to remove pwa since I couldn't figure out why it was loading vue's default favicon instead of my custom one. Ah well, I switched to nuxt and it just feels a lot saner instead of figuring out vue-cli3's new plugin stuff. – A. L Jun 09 '19 at 06:05

vue-router history mode on mac (localhost) throwing error on direct access

1 Answers1