Heroku部署Django+React应用失败：Push rejected，Node.js编译错误求助

Hey there, let’s troubleshoot this Heroku deployment headache together—those generic "Push rejected" messages are the worst, but we can narrow this down step by step. Since your app runs fine locally, the issue is almost certainly a mismatch between your local environment and Heroku’s build process, or a hidden configuration quirk. Here’s what to check:

1. Confirm Node.js/NPM Version Alignment #

Even if you updated your .env, double-check that your package.json explicitly defines the Node and NPM versions Heroku should use. Heroku relies on this engines block to pick the right runtime, and a mismatch here can break builds instantly. Add or verify this section:

"engines": {
  "node": ">=18.17.0",
  "npm": ">=9.6.7"
}

Replace the versions with exactly what you’re using locally (run node -v and npm -v in your terminal to confirm). Also, make sure Heroku is picking up these versions—run heroku config to check if any Node version variables are set, and delete any conflicting ones if needed.

2. Dig Into the Full Build Log #

The "failed to compile Node.js app" message is way too vague. You need the full error details to know what’s actually breaking. Run this command to get verbose output during your next push:

git push heroku main --verbose

Or, check the build logs directly in your Heroku dashboard (go to your app’s "Activity" tab, click the failed build, then expand the "Build Log" section). Look for lines starting with npm ERR! or Error:—these will tell you exactly what’s wrong (e.g., a missing dependency, a broken build script, or a permission issue).

3. Fix Your Build Scripts (Critical for Django+React Setups) #

If your React app lives in a subdirectory (like client/), Heroku’s default npm run build won’t know where to look. You need to set up a heroku-postbuild script to handle installing dependencies and building the React app during deployment. Update your root package.json like this:

"scripts": {
  "start": "gunicorn your_django_project.wsgi",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

Make sure the path to your React folder is correct, and that the npm run build command in your client’s package.json outputs files to a location Django can serve (like client/build/). Also, confirm that your Django settings.py is configured to serve these static files—for example, using WhiteNoise to serve the React build assets.

4. Check for DevDependency Conflicts #

Heroku skips installing devDependencies in production by default, but sometimes build tools (like webpack or babel) are listed there and are required to compile your React app. You have two options here:

• Move any build-critical packages from devDependencies to dependencies in your client’s package.json
• Force Heroku to install devDependencies by running:

  heroku config:set NPM_CONFIG_PRODUCTION=false
  

Note: The second option will increase your app’s slug size, so only use it if you’re certain a dev dependency is needed for the build.

5. Rule Out Cached or Corrupted App State #

Sometimes clearing the Heroku cache isn’t enough—corrupted config or cached dependencies can linger. Try creating a temporary test app to deploy to:

heroku create temp-test-deploy
git push temp-test-deploy main

If this works, it means your original app has some hidden corrupted state. You can then migrate your config variables (run heroku config:pull --app your-original-app and heroku config:push --app temp-test-deploy) and switch over to the new app.

6. Validate Local Build Process #

Since your app runs locally, confirm that the build process works exactly as it would on Heroku. In your client folder, run:

npm install && npm run build

If this fails locally, fix those errors first—Heroku will hit the same issues. If it succeeds, compare the output folder (like client/build/) to what’s being generated on Heroku (you can download the slug from the Heroku dashboard to check).

One final thought: Make sure your Django setup is correctly serving the React static files. For example, in settings.py, ensure STATICFILES_DIRS points to your React build’s static folder, and that STATIC_ROOT is configured for Heroku’s static file serving.

内容的提问来源于stack exchange，提问作者Muhammad Arsalan Toor