Uncaught SyntaxError: Unexpected token '<' - Error immedately upon JavaScript file reference in HTML hosted by Node.js

Question

I am using Node in order to run my website that uses HTML and JavaScript. I am getting this error upon running my code: Uncaught SyntaxError: Unexpected token '<'

I suspect that a possible issue might be the way I am importing/exporting the SQL connection? I have tried reworking the way I do the import and export in order to possibly fix the issue but no dice so far.

Here is my code:

Node.js File "server.js"

let http = require('http');
let fs = require('fs');

const mysql = require('mysql');

let con = mysql.createConnection({
    host: "***",
    user: "***",
    password: "***",
    database: "***",
    charset: "utf8"
});

module.exports = { con }

let handleRequest = (request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/html'
    });
    fs.readFile('./main.html', null, function(error, data) {
        if (error) {
            response.writeHead(404);
            response.write('File Not Found');
        } else {
            response.write(data);
        }
        response.end();
    });
};

http.createServer(handleRequest).listen(8000);

JavaScript File "reference.js

import {con} from 'server.js';

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        console.log("Geolocation not supported!");
    }
}


let longitude = document.getElementById("longitude");
let latitude = document.getElementById("latitude");

function showPosition(position) {

    longitude.value = position.coords.longitude;
    latitude.value = position.coords.latitude;
}

function initMap() {
    const myLoc = {lat: 0, lng: 0};

    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 14,
        center: myLoc,
        map: myLoc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    const marker = new google.maps.Marker({
        position: myLoc,
        map: map
    });
}

function addLocation() {
    let newLat = document.getElementById("latitude").value;
    let newLng = document.getElementById("longitude").value;
    let id = document.getElementById("id").value;

    let statement = "INSERT INTO data(id, longitude, latitude) VALUES (?,?,?)";
    let entry = [id, newLng, newLat];

    // id, longitude, latitude
    con.query(statement, entry, (err, results, fields) => {
        if (err) {
            return console.error(err.message);
        }

        console.log("Entry ID: " + results.insertId);
    });
}

function displayLocations() {

    let statement = "";

    con.query(statement, (err, results, fields) => {
        if (err) {
            return console.error(err.message);
        }

        document.getElementById("locations").innerText = results;
    });
}

HTML File contains this line in the head: <script type="text/javascript" src="./reference.js"></script>

Answer 1

From what I understand by reading your code, you're doing a few things in the wrong way.

First, your server.js file should be run by Node.js, and your reference.js should be run by the browser. You can't just import your server.js file directly into your reference.js file since they both are supposed to run in different environments.

Instead, you should make a request from your frontend(application running on browser) to the backend (application running on NodeJS).

Please, look for how to make requests from javascript frontend application to a backend server application. There are a lot of good tutorials that you can learn from.