I have a simple Node Express server setup that serves an html file with a bundle.js. Whenever I try to add a route that catches all routes and redirects to the homepage, I get an error in the console when I open an unmapped route saying
"EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection."
I'm not exactly sure what this means, I was also having issues with trying to serve the index.html (Issues with the path for the file) so it's possible that might have something to do with this. I'm trying to serve the Index.html inside the build folder.
Project Structure:
Index.js (Server File)
const http = require('http');
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const server = http.createServer(app);
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '.', 'public/build')));
app.get('/', (req, res) => {
res.sendFile('index.html', {root: path.join(__dirname, 'public/build')});
res.end();
});
app.all('*', (req, res) => {
console.log('triggered');
res.redirect('/');
res.end();
});
server.listen(3000);
Oddly enough, when I go to localhost:3000 It prints "triggered" in the node console and If I remove the "app.all" line of code that catches any other routes, then it doesn't throw this error anymore:
"EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection."
However, If I remove the line of code that catches routes, I get the error "cannot GET /routename" as expected.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>project</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
Content being rendered in the Index.html file
import React from 'react';
import './styles/index.css';
const App = () => {
return (
<div>
<h1>Home Page</h1>
<button onClick={null}>Click Me</button>
</div>
);
};
export default App;