Blank page after deployment - React app with node

Question

My react app is working fine on localhost and the server-side (node js) is also working fine on localhost, but when I deployed it on Heroku, it shows a blank page.

For deployment, I did create a Procfile where I referred to the server file

web: node ./server/index.js

which also includes:

app.use(express.static(__dirname + '../client/build'));
app.get("/*", (req, res) =>
    res.sendFile(path.resolve(__dirname, "../client/build", "index.html"))
);

When I run the app I get a blank page

The console I get:

Uncaught SyntaxError: Unexpected token '<'
main.679eafbe.chunk.js:1 
Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

After searching I made sure that:

• The react app is created: npm create-react-app my-app
• I don't have homepage props in my package.json for the react app
• I did build the react app which is found under the client folder under myApp after creation

Answer 1

Uncaught SyntaxError: Unexpected token '<'
main.679eafbe.chunk.js:1 

This error implies your server is returning HTML when handling main.679eafbe.chunk.js.

This means express.static probably isn't matching that path and the request is passed onto your html middleware.

This is either because main.679eafbe.chunk.js doesn't exist in the client/build directory or express.static is misconfigured.

If I were to take a guess, I'd suggest changing the root you pass to express.static to align with the path you're using in the html middleware, e.g.

app.use(express.static(path.resolve(__dirname, "../client/build"))); // path.resolve was missing here
app.get("/*", (req, res) =>
    res.sendFile(path.resolve(__dirname, "../client/build", "index.html"))
);