CODEWITHSUNDEEP
vue.jsgithub-pagesunexpected-token
Erika Winters
Erika Winters

Reputation: 43

GitHub Pages - Unexpected Token '<' on Live, no issue on Local

I made a GitHub pages site using Vue some months back (URL: https://wintersen.github.io/) which worked fine. Today (5/7/21) I noticed that when I opened it, it displayed a blank page where my index was being loaded, but the console reported:

Uncaught SyntaxError: Unexpected token '<' at chunk-vendors.f6a3cd19.js:1 
Uncaught SyntaxError: Unexpected token '<' at app.e3426208.js:1

I made some small updates to it, deployed my site to GitHub pages again to see if it would help, and no difference. Everything works fine on local when I serve it through the Vue-cli. I'm a bit lost, since it looks like it broke on its own...

This is the section complaining about the < 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/wintersen.github.io/favicon.ico">
<title>Erika N Winters</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<link href="/wintersen.github.io/css/app.2c63130d.css" rel="preload" as="style">
<link href="/wintersen.github.io/css/chunk-vendors.93a89b18.css" rel="preload" as="style">
<link href="/wintersen.github.io/js/app.e3426208.js" rel="preload" as="script">
<link href="/wintersen.github.io/js/chunk-vendors.f6a3cd19.js" rel="preload" as="script">
<link href="/wintersen.github.io/css/chunk-vendors.93a89b18.css" rel="stylesheet">
<link href="/wintersen.github.io/css/app.2c63130d.css" rel="stylesheet"></head>
<body>
<noscript><strong>We're sorry but myweb doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id="app"></div>
<script src="/wintersen.github.io/js/chunk-vendors.f6a3cd19.js"></script>
<script src="/wintersen.github.io/js/app.e3426208.js"></script>
</body>
</html>
<style>
html{
    scroll-behavior: smooth;
  }</style>

Chrome tools says that some of my files are being interpreted as stylesheets but are MIME type text/html. Could this be related?

The repo is https://github.com/wintersen/wintersen.github.io, I'd really appreciate some help.

Solution (5/10/21)

As @allan-chain pointed out, my code was requesting the wrong path to my files--if I remember correctly, I had to supply my Vue.config with the full wintersen.github.io path as its homepage in order for it to redirect properly, but now it's doubling up the url instead. So the solution was just to edit my vue.config.js.

vue.config.js 

module.exports = {
  "publicPath": "/"
}

Upvotes: 4

Views: 939

Answers (2)

user
user

Reputation: 1070

The answer of @allan-chain is correct but I want to add that, please put the <style> tag inside the HTML.

Please remove <base href="https://wintersen.github.io/"> from the code (if you use it): 

<!DOCTYPE html><html lang="en"><head><base href="https://wintersen.github.io/">
<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<title>Erika N Winters</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<link href="/css/app.2c63130d.css" rel="preload" as="style">
<link href="/css/chunk-vendors.fb5953f7.css" rel="preload" as="style">
<link href="/js/app.3a66a1e0.js" rel="preload" as="script">
<link href="/js/chunk-vendors.8cae5d72.js" rel="preload" as="script">
<link href="/css/chunk-vendors.fb5953f7.css" rel="stylesheet">
<link href="/css/app.2c63130d.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but our site doesn't work properly without JavaScript. Please enable it to continue.</strong></noscript>
<style>html{scroll-behavior: smooth;}</style>
<div id="app"></div>
<script src="/js/chunk-vendors.8cae5d72.js"></script>
<script src="/js/app.3a66a1e0.js"></script>
</body></html>

Upvotes: 2

Allan Chain
Allan Chain

Reputation: 2845

Your code is requesting https://wintersen.github.io/wintersen.github.io/js/app.e3426208.js, but it should be https://wintersen.github.io/js/app.e3426208.js. So the src / link should be /js/app.e3426208.js or //wintersen.github.io/js/app.e3426208.js.

I can't go back to past, but I guess it worked before because GitHub redirected https://wintersen.github.io/wintersen.github.io/js/app.e3426208.js to https://wintersen.github.io/js/app.e3426208.js. However now GitHub is simply redirecting to https://wintersen.github.io, which is returning an HTML page, causing Unexpected token '<'

Upvotes: 3

Related Questions