This is because you are serving the same file for every request - also for the scripts required by the original HTML page. The browser request script, it gets HTML and the parser fails on <
of <doctype>
or <html>
.
You can see in the Network tab of your browser's developer console all of the requests that your browser is making - I can bet that you're requesting something like script.js
and instead of JavaScript contents you get the HTML contents of your index.html
file.
It seems that you're using Express. Use express.static
to serve static files instead of res.sendFile()
Since it seems that you have every static file in build
, use something like this:
const path = require('path');
const express = require('express');
const app = express();
const dir = path.join(__dirname, 'build');
app.use(express.static(dir));
app.listen(3000, function () {
console.log('Listening on http://localhost:3000/');
});
This is the entire program that you need. Of course you can change the port number.
It will serve your index.html
correctly but it will also serve all of the other assets like images, client-side scripts required with <script>
, CSS files etc. plus also other HTML files if there are any.
If you don't want to use Express then see this answer for more options of serving files: