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:1Uncaught 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 ing back with a status 200.
Why this occurs?
OBS: Locally this works perfectly.
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:1Uncaught 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 ing back with a status 200.
Why this occurs?
OBS: Locally this works perfectly.
Share Improve this question edited May 30, 2020 at 2:40 Fabrício Pinto asked Mar 27, 2020 at 1:02 Fabrício PintoFabrício Pinto 4291 gold badge6 silver badges18 bronze badges 1-
3
Take a look at the response the browser is receiving for those files. Starting with
<
suggests an HTML page is ing back, possibly a 404 or the index page. – skirtle Commented Mar 27, 2020 at 1:26
4 Answers
Reset to default 6Here is a solution that doesn't require hand-editing your dist assets. Simply add the following property to the exports of your vue.config.js:
publicPath: './'
I had the same issue and I put publicPath: '/'
in vue.config.js as bellow
module.exports = {
publicPath: '/'
}
Now it is working fine.
Add <%= BASE_URL %> on all links in index.html (Example:
<link href="<%= BASE_URL %>favicon/apple-icon-144x144.png">
)And add the base tag (Example:
<base href="https://mywebsite." />
) 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.
This is because app.xxxxx.js and vendors.xxxx.js are not getting the base URL of your project.
Just add the base tag (<base href="https://yourdomain." />
) to the <head>
tag in your project's index.html file