Heroku - Deploying React/Express app and getting 'Failed to load resource' in the console when requesting the chunk.js files

问题

I am getting these errors in the console after my React app has been built and deployed on Heroku.

Refused to apply style from 'https://radiant-tor-66940.herokuapp.com/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Failed to load resource: the server responded with a status of 404 (Not Found) main.3174e036.chunk.js:1 
Failed to load resource: the server responded with a status of 404 (Not Found) 1.b1e0c624.chunk.js:1 
Failed to load resource: the server responded with a status of 404 (Not Found) main.3174e036.chunk.js:1 
Failed to load resource: the server responded with a status of 404 (Not Found) manifest.json:1
Manifest: Line: 1, column: 1, Unexpected token. manifest.json:1

The index.js file is located in /client/build/ on my Heroku server. This is the file my Express server sends. The server is sending this index.html file, but the file itself is not finding the resources it needs.

This is causing the issue of loading a blank app. Ffor some reason index.html is not finding the chunk.js files inside of /client/build/static/js. They are definitely in there and I can confirm with heroku run bash and inspecting the directories.

When I inspect the index.html document in the browser, I can see at the bottom where the script tags call the chunk.js files in /static/js:

This is what the root package.json for the app looks like:

  "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"
  }

This is what the package.json for the React app located in /client looks like:

{
  "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-components": "^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 file structure looks like on Heroku post-build:

1st image: /client directory
2nd image: /client/build directory
3rd image: /client/build/static/js directory

回答1:

The issue was actually in my server.js file, which I did not include on this post.

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.

来源：https://stackoverflow.com/questions/56875718/heroku-deploying-react-express-app-and-getting-failed-to-load-resource-in-th

标签

javascript

node.js

reactjs

heroku