Amy T McBride Amy T McBride - 1 year ago 41
Node.js Question

Error message shows unexpected angle bracket, but there should be no unexpected angle bracket

I have written some code which I'm serving from my node server with

. I've got the HTML serving fine, but when I started adding scripts to the
file I found the oddest errors appearing in the developer console:

Uncaught SyntaxError: Unexpected token < jquery-1.12.4.min.js:1
Uncaught SyntaxError: Unexpected token < hack.js:1

This is my HTML:

<link rel="stylesheet" type="text/css" href="hack.css">
<h1>Colour Hack v1.0</h1>
<p>Guess the correct values for each colour to unlock information on the European Union.</p>
<script src="jquery-1.12.4.min.js"></script>
<script src="hack.js"></script>


const box = "<canvas>BOX</canvas>"

$(document).ready(function() {

And the node server (
) code is:

//Import http and file server libraries
const http = require('http');
const fs = require('fs');

//Define port for comms
const PORT = 8080;

//Start server
http.createServer(function(request, response) {
fs.readFile('index.html', function(err, contents) {

console.log('Server listening on port: %s', PORT);

Why are there errors appearing about unexpected angle brackets??

Answer Source

You're responding to every request to your server with the contents of index.html. So the < in question is the one on the first line of your index.html file, <!DOCTYPE HTML>. (Look in your browser's dev tools at the Network tab, and look at what your server returned for those JavaScript files.)

You need to look at what's being requested and return the correct resource (see the docs for IncomingMessage, which is what request is — you can get the requested URL from its url property, for instance), or use a library (like ExpressJS) that is happy to do that for you.