I am having a difficult time trying to figure out what is going on here. When I deploy my React/Express app to Heroku, everything builds and deploys with no errors, but my React frontend is pletely blank.

I am getting this errors in the browser console:

 Uncaught SyntaxError: Unexpected token < 1.b1e0c624.chunk.js:1
 Uncaught SyntaxError: Unexpected token < main.48d62be5.chunk.js:1 
 manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

Here is how my server.js file is setup to send the root index.html file:

app.use('/static', express.static(path.join(__dirname, 'client/build')));

app.get('*', function(_, res) {
  res.sendFile(path.join('/app/client/build/index.html'), function(err) {
    if (err) {
      console.log(err);
      res.status(500).send(err);
    }
  });
});

And this is what the top portion (code redacted for brevity) of my React apps package.json looks like:

{
  "name": "client",
  "version": "0.1.0",
  "homepage": "/",
  "private": true,
}

I figured setting the homepage in the client's package.json would do it but nothing. I am really unsure what to do here. I am thinking that something might be off with a path or something like that.

Update

This is still an issue for me. Below I have shared more code in hopes that this is can aid in my case. I am getting a new error this time when the page loads:

{"errno":-2,"code":"ENOENT","syscall":"stat","path":"/app/server/client/build/index.html","expose":false,"statusCode":404,"status":404}

This error above is being sent from the error block in this code:

app.get('*', function(req, res) {
  res.sendFile('/client/build/index.html', { root: __dirname }, function(err) {
    if (err) {
      res.status(500).send(err);
    }
  });
});

I have changed my server.js file to serve the index.js file like this versus using a template literal (trying anything at this point):

    //Express
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 8000;
    //Core Node Modules
    const fs = require('fs');
    const path = require('path');

    //Middleware
    app.use(express.urlencoded({ extended: true }));
    app.use(express.json());

        app.use(express.static(path.join(__dirname, '/client/build')));

        app.get('*', function(req, res) {
          res.sendFile('index.html', { root: __dirname }, function(err) {
            if (err) {
              res.status(500).send(err);
            }
          });
        });

    app.listen(port, err => {
      if (err) console.info(`Error: The server failed to start on ${port}`);
      else console.info(`****** Node server is running on ${port} ******`);
    });

This is the root level package.json for my server. I have added the heroku-postbuild script to build the React app located in client:

      "scripts": {
        "test": "jest",
        "start": "node server/server.js",
        "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
      },
  "engines": {
    "node": "~9.10.1",
    "npm": "~5.6.0"
  }

Here is the package.json for the React app located in /client:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "lodash": "^4.17.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "styled-ponents": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8000/"
}

Here is what the files looks like on the Heroku server:

1st image: Root Directory 2nd image: /client directory 3rd image: /client/build directory 4th image: /client/build/static directoy

I am having a difficult time trying to figure out what is going on here. When I deploy my React/Express app to Heroku, everything builds and deploys with no errors, but my React frontend is pletely blank.

I am getting this errors in the browser console:

 Uncaught SyntaxError: Unexpected token < 1.b1e0c624.chunk.js:1
 Uncaught SyntaxError: Unexpected token < main.48d62be5.chunk.js:1 
 manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

Here is how my server.js file is setup to send the root index.html file:

app.use('/static', express.static(path.join(__dirname, 'client/build')));

app.get('*', function(_, res) {
  res.sendFile(path.join('/app/client/build/index.html'), function(err) {
    if (err) {
      console.log(err);
      res.status(500).send(err);
    }
  });
});

And this is what the top portion (code redacted for brevity) of my React apps package.json looks like:

{
  "name": "client",
  "version": "0.1.0",
  "homepage": "https://radiant-tor-66940.herokuapp./",
  "private": true,
}

I figured setting the homepage in the client's package.json would do it but nothing. I am really unsure what to do here. I am thinking that something might be off with a path or something like that.

Update

This is still an issue for me. Below I have shared more code in hopes that this is can aid in my case. I am getting a new error this time when the page loads:

{"errno":-2,"code":"ENOENT","syscall":"stat","path":"/app/server/client/build/index.html","expose":false,"statusCode":404,"status":404}

This error above is being sent from the error block in this code:

app.get('*', function(req, res) {
  res.sendFile('/client/build/index.html', { root: __dirname }, function(err) {
    if (err) {
      res.status(500).send(err);
    }
  });
});

I have changed my server.js file to serve the index.js file like this versus using a template literal (trying anything at this point):

    //Express
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 8000;
    //Core Node Modules
    const fs = require('fs');
    const path = require('path');

    //Middleware
    app.use(express.urlencoded({ extended: true }));
    app.use(express.json());

        app.use(express.static(path.join(__dirname, '/client/build')));

        app.get('*', function(req, res) {
          res.sendFile('index.html', { root: __dirname }, function(err) {
            if (err) {
              res.status(500).send(err);
            }
          });
        });

    app.listen(port, err => {
      if (err) console.info(`Error: The server failed to start on ${port}`);
      else console.info(`****** Node server is running on ${port} ******`);
    });

This is the root level package.json for my server. I have added the heroku-postbuild script to build the React app located in client:

      "scripts": {
        "test": "jest",
        "start": "node server/server.js",
        "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
      },
  "engines": {
    "node": "~9.10.1",
    "npm": "~5.6.0"
  }

Here is the package.json for the React app located in /client:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "lodash": "^4.17.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "styled-ponents": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8000/"
}

Here is what the files looks like on the Heroku server:

1st image: Root Directory 2nd image: /client directory 3rd image: /client/build directory 4th image: /client/build/static directoy

• javascript
• node.js
• reactjs
• express
• heroku

Share Improve this question Follow edited Jul 3, 2019 at 15:04 maison.m asked Jul 2, 2019 at 18:13 maison.mmaison.m 87344 gold badges2121 silver badges4040 bronze badges 6

• Does heroku logs --tail add any insight? – stever Commented Jul 2, 2019 at 18:20
• Can you insert your build script - a webpack.config.js or something? It's hard to tell why the files are not loaded without knowing if they are generated at all. – Felix Commented Jul 2, 2019 at 19:23
• @stever I wish, I am getting GET / 500 at path:"/" errors and I can see it log out when the request for the index.html file 500's. It's telling me there is a 500, but it's not giving any suggestions as to why. – maison.m Commented Jul 3, 2019 at 14:36
• @felix I have updated the original post to show the Heroku directory via heroku bash post build and deployment. I also included the build script for heroku-postbuild. – maison.m Commented Jul 3, 2019 at 14:37
• The ~ on the directory indicates that you are on the home directory of the user. Can you output what you send to sendFile function? – jotapdiez Commented Jul 3, 2019 at 17:29

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

The issue was in my server.js file.

Originally it was express.static(path_join(__dirname, '/client/build'))

it needed to be: express.static(path_join(__dirname, '../client/build'))

This is the case because my server.js file is located in /server and it was trying to find /client/build inside of /server instead of the root app directory on Heroku.

As we don't have access to your server, it's hard to tell the reason behind your problem. I would guess you misconfigured your express server as those three error messages indicate, that the server only returns the index.html file.

And as HTML is not valid Javascript, you get unexpected token errors.

I would also guess, that the following line has no effect at all, which means there are no files in this folder (or not those you want to access).

app.use('/static', express.static(path.join(__dirname, 'client/build')));