0

I'm working on a React/Node app (using create-react-app) and trying to deploy it using Heroku. When we try to deploy on Heroku, we get the following error about react-scripts: sh: 1: react-scripts: not found.

Edit: looking at the full logs, it seems that Heroku successfully installed the node packages but for some reason it can't find react-scripts.

We've tried referring to similar issues on here but haven't had any luck finding a solution. Has anyone else ran into this and found a solution or know what might be causing?

Here's the full Heroku log and package.json files are below for reference:

-----> Building on the Heroku-20 stack
-----> Using buildpacks:
       1. heroku/nodejs
       2. mars/create-react-app
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  16.x
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 16.x...
       Downloading and installing node 16.15.1...
       Using default npm version: 8.11.0
       
-----> Installing dependencies
       Installing node modules
       
       added 203 packages, and audited 204 packages in 12s
       
       58 packages are looking for funding
         run `npm fund` for details
       
       found 0 vulnerabilities
       
-----> Build
       Running heroku-postbuild
       
       > [email protected] heroku-postbuild
       > cd client && npm run build
       
       
       > [email protected] build
       > react-scripts build
       
sh: 1: react-scripts: not found
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

Here are the package.json files for the app:

Root:

{
  "name": "pool-chem-calculator",
  "version": "1.0.0",
  "description": "Calculator that calculates pool water chemistry based off values in a form",
  "main": "server/server.js",
  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:prod": "cd server && npm start",
    "start:dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\"",
    "test": "cd client && npm run test",
    "lint": "npx eslint client/src",
    "heroku-postbuild": "cd client && npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pschlafley/Pool-Chem-Calculator.git"
  },
  "author": "Peyton Schlafley, Tom Chestnut",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/pschlafley/Pool-Chem-Calculator/issues"
  },
  "homepage": "https://github.com/pschlafley/Pool-Chem-Calculator#readme",
  "devDependencies": {
    "concurrently": "^7.2.0",
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-react": "^7.28.0",
    "prettier": "^2.5.1"
  },
  "dependencies": {
    "if-env": "^1.0.4"
  },
  "engines": {
    "node": "16.x"
  }
}

Client:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "type": "module",
  "dependencies": {
    "@apollo/client": "^3.6.2",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/material": "^5.3.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "formik": "^2.2.9",
    "graphql": "^16.5.0",
    "jwt-decode": "^3.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2",
    "yup": "^0.32.11",
    "react-device-detect": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Server:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server-express": "^3.6.4",
    "bcrypt": "^5.0.1",
    "express": "^4.17.3",
    "graphql": "^16.3.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.2.7"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}
2

2 Answers 2

0

I think you should do npm i react-scripts in client

Sign up to request clarification or add additional context in comments.

Comments

0

Thanks for the help!

We ended up adding

"heroku-prebuild": "npm install && cd client && npm install && cd ../ && cd server && npm install",

to the scripts in the root package.json and so the packages get installed in both directories before the build process, and the build works on Heroku now.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.