Unexpected token "<" on first load of node.js app, then loads properly - node.js

Question

I've just deployed a Node.js/React app on Google's Compute Engine. My VM is running Linux Debian 9 with Node version 10.11.0. My React app was created with create-react-app. I'm also using react-app-rewired to add a loader for one of my libraries. The issue is that when I build the app and deploy, the first time I load it from any browser I get an error: Syntax error: Unexpected token <. Upon further inspection, I find that this is because the main.js file in the static folder (/build directory) is my index.html from the static directory. If I refresh the page, the error is fixed. Then, if I go to another browser (including just another chrome browser linked to a different email), the same thing happens. So basically the first time anyone tries to load the page on a browser, even if it's days after it was deployed, this happens. Then they refresh and everything works normally. Does anyone have any idea what might cause this? Below is my package.json file along with how I'm serving the page in my server.js file. I don't know what other info is relevant, but let me know what other information might be needed and I can add it. Thanks in advance.
package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^1.4.0",
"#material-ui/icons": "^1.1.0",
"#material-ui/lab": "^1.0.0-alpha.8",
"#react-pdf/renderer": "^1.0.0-alpha.14",
"ajv": "^6.5.2",
"axios": "^0.18.0",
"blob-stream": "^0.1.3",
"classnames": "^2.2.6",
"debug": "^3.1.0",
"fs": "0.0.1-security",
"fullcalendar-reactwrapper": "^1.0.7",
"html-react-parser": "^0.4.7",
"joi-browser": "^13.4.0",
"jwt-decode": "^2.2.0",
"moment": "^2.22.2",
"pdfmake": "^0.1.37",
"react": "^16.4.1",
"react-app-rewired": "^1.5.2",
"react-big-calendar": "^0.19.2",
"react-calendar": "^2.16.1",
"react-dom": "^16.4.1",
"react-dropzone": "^4.2.13",
"react-load-script": "0.0.6",
"react-number-format": "^3.5.0",
"react-pdf": "^3.0.5",
"react-redux": "^5.0.7",
"react-responsive": "^4.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-signature-pad": "0.0.6",
"react-text-mask": "^5.4.2",
"react-transition-group": "^2.4.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-thunk": "^2.3.0",
"socket.io-client": "^2.1.1",
"transform-loader": "^0.2.4",
"twilio-video": "^1.13.0",
"yoga-layout": "github:naminho/yoga-layout-windows"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
server.js excerpt:
// Serve static assets if in production
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
UPDATE:
The first time the browser loads the page, if I check the js folder, it has an incorrect name for the main js file. The file name is always main.#####.js where ##### is a series of random letters and numbers. The sequence is incorrect when I compare it to what's on the server, but upon reloading a new filename appears that matches the server and everything works fine. What's interesting is the html file that is mistakenly being served under the incorrect main.#####.js file contains a link to the correct main.#####.js filename. And again, I'm not saying this happens upon the first request. This happens every time a new browser attempts to load the page (Firefox, Chrome, Edge and Safari have been tested and all behave the same). So how is it that days after a deployment this still happens?