Categories
Mastering Development

Why is my React App not displaying when I serve an index.html file with Express to Heroku?

I am trying to deploy my MERN app to Heroku. When I push to Heroku, I am able to type my endpoints into the URL to ‘get’ data. However, the main page of the app is not displaying my react app components. I am using Express to send my index.html file from /frontend/build (which is my react app).

EDIT: I found my issue but don’t know how to solve it. In my deployed Heroku app, I am getting errors in the console saying “Uncaught SyntaxError: Unexpected token ‘<‘” for chunk.js. It seems that Chunk.js is coming in as an HTML file instead of a JS file. I do not know how to change this. I was thinking to modify webpack, but I don’t have a webpack file because I used create-react-app.

Here is my routes.js file:

const app = express()
const path = require('path'); 

app.use(express.static(path.join(__dirname, 'frontend', 'build')))

module.exports = function(app, db) {

    app.get('/categories', (req, res) => {
        const categories = {
            "categories": ["Gas", "Dining", "Groceries", "Online Shopping", "Travel", "Other"],
            "cardtype": ["Visa", "Amex", "Mastercard", "Discover"],
            "interest": [1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6]
        }
        res.send(categories);
    });
}

    app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, 'frontend', 'build','index.html'))
    });

My package.json File in Frontend

{
  "name": "frontend",
  "version": "0.1.0",
  "homepage": "https://myappurl.herokuapp.com/",
  "proxy":"http://localhost:8000/",
  "private": true,
  "engines": {
    "npm": "6.13.4",
    "node": "12.15.0"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "stop": "taskkill -F -IM node.exe"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.9.5"
  }
}


The Errors I am getting in console
enter image description here

Chunk.js files
enter image description here

File Directory
enter image description here

My chunk.js main file for local build
enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *