Rendering React on Node.js server - node.js

Question

# Rendering React on Node.js server? #
================================================================================================
## Intro ##
Hello, I am trying to build a node.js server, and render React with it. I have been trying to follow some online tutorials, in the process getting a little lost. I understand GET/POST routes. I know my server.js need to render my index.js'. My React code runs fine with the React environment with npm start` in the shell/terminal.
## The Error ##
My Error happens when I attempt to run my server via "nodemon server.js" in the terminal.
[nodemon] starting `node server.js`
(node:10748) ExperimentalWarning: The ESM module loader is experimental.
file:///C:/Users/The%20core%20unit/Desktop/Code%20file%20storage/React/react-app/server.js:42
const app = ReactDOMServer.renderToString(<Index />);
^
SyntaxError: Unexpected token '<'
at Loader.moduleStrategy (internal/modules/esm/translators.js:88:18)
at async link (internal/modules/esm/module_job.js:41:21)
[nodemon] app crashed - waiting for file changes before starting...
I know this Error is telling me that my server.js can not read the React code.
### server.js ###
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require("mongoose");
const https = require("https");
const { Server } = require("http");
const app = express();
import Index from "./src/index.js"
import ReactDOMServer from 'react-dom/server'
import path from 'path';
import fs from 'fs';
// Error List //
/*Server is starting, however not rendering any data. */
//Mongoose connection to MongoDB//
mongoose.connect("mongodb://localhost:27017/watchesDB",{ useUnifiedTopology: true, useNewUrlParser: true});
//Mongoose Schema//
const watchesSchema = {
Company: String,
Model: String,
Year: Number
};
const Watch = mongoose.model("Watch", watchesSchema);
//Boiler Plate Code for Server//
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static("public"));
// API call Routes //
//Home APi call
app.get('/', (req, res) => {
const app = ReactDOMServer.renderToString(<Index />);
const indexFile = path.resolve("./public/index.htlm");
fs.readFile(indexFile, 'utf8', (err, data) => {
if (err) {
console.error('Something went wrong:', err);
return res.status(500).send('Oops, better luck next time!');
}
return res.send(
data.replace(`<div id="root"></div>`, `<div id="root">${app}</div>`)
);
});
});
app.use(express.static('./build'));
//Watches API call
app.get("/watches", function(req, res){
Watch.find(function(err, foundWatches) {
console.log(foundWatches)
});
});
// Server listing //
app.listen(3000, function(){
console.log("Server accessfully booted...")
});
### index.js ###
import ReactDOM from 'react-dom';
import Heading from "./Heading";
import Watch from "./Watch";
function Index() {
ReactDOM.render(<div>
<Heading />
<Watch /></div>,
document.getElementById('root')
);
};
export default Index
[Pic of index.js][1]
[Pic of server.js][2]