Uncaught SyntaxError: Unexpected token

Question

Im getting this weird error thats pointing to my declaration and can not figure out how to fix it.

So initially, I was creating a small project to help me learn web development. I had initially started this project as a static web page but decided to connect it to a server because I needed to use a npm api package (yelp-node). Here is my server-side code that reads my html file.

https://jsfiddle.net/hgcm3w27/

var http = require('http');
var path = require('path');
var fs = require('fs');

var verifyMimeType = true;
var port = 8000;
var serverURL = "127.0.0.1";

console.log("Starting web server: " + serverURL + ":" + port);

var server = http.createServer(function(req,res){
  // set to URL or default to index.html
  var filename = "/index.html"
  console.log("Filename is: " + filename);
  // sets the extention of the filename
  var ext = path.extname(filename);
  var localPath = __dirname;
  console.log("Local path: "+ localPath);
  var validExtentions ={
    ".html" : "text/html",
    ".js": "application/javascript",
    ".css": "text/css",
    ".txt": "text/plain",
    ".jpg": "image/jpeg",
    ".gif": "image/gif",
    ".png": "image/png"
  };

  var validMimeType = true;
  var mimeType = validExtentions[ext];
  if(verifyMimeType){
    validMimeType = validExtentions[ext] != undefined;
  }

  if(validMimeType){
    localPath += filename;
    fs.exists(localPath, function(exists){
      if(exists){
        console.log("Serving file: " + localPath);
        getFile(localPath,res,mimeType);
      }
      else{
        console.log("File not found: " + localPath);
        res.writeHead(404);
        res.end();
      }
    });
  }
  else{
    console.log("Invalid file extention detected: " + ext);
    console.log("Invalid file name: " + filename);
  }
});

server.listen(port,serverURL);

function getFile(localPath, res, mimeType){
  fs.readFile(localPath, function(err, data){
    if(err){
      console.log("Error with reading file: ("+ err + ")");
      res.writeHead(500);
      res.end();
    }
    else{
      res.setHeader("Content-Length", data.length);
      if(mimeType != undefined){
        res.setHeader("Content-Type", mimeType);
      }
      res.statusCode = 200;
      // the end does two things, it write to the response and
      // ends the response.
      res.end(data);
    }
  });
}

HTML file that its complaining about:

<html>
  <head>
   <title>En Route App.</title>
   <link rel="stylesheet" href="css/stylesheet.css">
   ....

It reads the file and connects to the server properly, but once I did that it is giving me this weird error. A bit confused because its saying that my scripts.js and yelp.js code is an html document in the console log but isnt. script.js is the file that contains google map api

Jonathan Lonowski · Accepted Answer

The filename being served is the same for every request. It's only being set once and to a hard-coded value.

var filename = "/index.html"

In the console output from your application, you should be seeing this for each request:

Filename is: /index.html

You can retrieve the path that's being requested from req.url, getting its pathname:

var parsedUrl = url.parse(req.url);
var filename = url.resolve('/', parsedUrl.pathname);

(Using url.resolve() will help avoid any attempts to retrieve files from outside of your application's public folder by adding multiple ../ to the path.)

To also support serving default files when the URL refers to a directory, you can check for a trailing slash:

// if requesting a directory, add a default file
if (/[/\]$/.test(filename)) {
    filename = url.resolve(filename, 'index.html');
}

Or, once you know the full disk path, you can check if it's a directory on disk with fs.stats() and stats.isDirectory(), then use path.join() to append index.html.

Daniel · Answer

You don't have the close tag head, check this.

Uncaught SyntaxError: Unexpected token < (from <!DOCTYPE html>)

Tags:

javascript

html

node.js

exAns

2 Answers

Jonathan Lonowski

Daniel

Recent Activity

Donate For Us