Answer a question

When I generate the production version of my PWA built with VueJS I got this error in Google Chrome after deploying it to my server:

• Uncaught SyntaxError: Unexpected token '<' in app.21fde857.js:1
• Uncaught SyntaxError: Unexpected token '<' in chunk-vendors.d1f8f63f.js:1

I take a look in the Network tab of the console and in both files chunk-vendors.d1f8f63f.js and app.21fde857.js the index.html is coming back with a status 200.

Why this occurs?

OBS: Locally this works perfectly.

Answers

1. Add <%= BASE_URL %> on all links in index.html (Example: <link href="<%= BASE_URL %>favicon/apple-icon-144x144.png">)

2. And add the base tag (Example: <base href="https://mywebsite.com" />) in the head tag, and now this works perfectly.

Old answer

I found a solution. I have to add a manually a . in every src in the index.html file in the dist/ folder. (Example: <link href=./js/chunk-vendors.d1f8f63f.js rel=preload as=script>)

In the index.html of the source code, I have added <%= BASE_URL %> in every link, (Example: <link rel="apple-touch-icon" sizes="144x144" href="<%= BASE_URL %>favicon/apple-icon-144x144.png">), as well as in this question, but this doesn't work, I think that this error occurs because of it.