Create-React-App deployment to Heroku failed with ` react-scripts: not found`

Question

We're developing a ReactJS application using Create-React-App, that is served from our Node/Express server that also serves API's. We deploy the whole server to Heroku using node/JS buildpack and trying to get the CRA build step npm run build in postinstall script from the node package.json file as suggested by @mars in this issue.

The issue is that Heroku deployment is failing with this error. Note that this error happen to me sometime locally but then a npm install from the web_app is solving the issue, but not when run in Heroku. I have two related questions:

1. How to deploy to Heroku a Node/Express app that serves both APIs and a Create-React-App application? I can commit my build directory but this is really not the right way.
2. Why the react-scripts are disappearing and I have to run multiple times the npm install.

Answer 1

@johnnycon -

This was exactly the issue and I've received the answer from Mars in this github issue post:

@philjoseph, react-scripts is (by default) a devDependency for CRA apps, but Heroku Node buildpack has environment NODE_ENV=production which causes npm install to skip devDeps.

To install those devDeps too:

npm install --only=dev && npm install && npm run build

He also pointed to this excellent repo: https://github.com/mars/heroku-cra-node

I followed this and it works like a charm :)

Answer 2

Since you need "react-scripts" both in development and in production, you can simple move "react-scripts": "1.0.16" from "devDependencies" into "dependencies", so heroku doesn't ignore it.

Answer 3

For Anyone in 2021, Follow Alexander Cherednichenko's VERY SIMPLE advice

Explanation: As of October 2021, Create-React-App's react-script package has a ton of security vulnerability issues. I'd imagine a few people may run into their "fix" which suggests moving react-scripts to devDependencies. If you're deploying to Heroku this will NOT work. Moving react-scripts to devDependencies will cause this error since Heroku needs react-scripts to build the React app. It'll be fine locally, and you'll be vulnerability free when you run npm audit --production or yarn audit --production. Ultimately, though, Heroku will demand react-scripts is in the regular dependencies section.

The highest voted answer provides a great example repo by Mars Hall (a principal engineer at Heroku) for creating a react app that's served from a node backend. These days, though, it too includes react-scripts in the regular dependencies section of it's react-ui/package.json file. In addition, since Create-React-App defaults to Yarn these days, the addition of npm install --only=dev will not run nor work (that I could tell based on the node buildpack log). Moreover, it may add testing dependencies that your app definitely won't need in production.

Unfortunately, until Create-React-App decides to do some updates, it's best to just ignore the issues that npm audit brings up (at least the ones related to react-scripts). Since react-scripts is a build tool, it's extremely unlikely for any vulnerabilities raised to be exploited.

P.S. This likely would be better suited as a comment under Alexander Cherednichenko's answer but I was one reputation away from being able to do so.

P.P.S Hopefully someone actually finds this helpful!

Answer 4

There's a very simple solution. Before running the start script, Heroku will run a build script if it's in your package.json.

"scripts": {
  "start": "node server.js",
  "build": "cd client/ && yarn install && yarn build"
}

Answer 5

Are react-scripts declared as a devDependency or regular dependency in package.json? Since you're building on Heroku and heroku is reading the env variable as production (I'm assuming here), it won't install react-scripts. Try moving react-scripts as a regular dependency and try again.

With other cloud providers, I likely wouldn't follow this path, but with Heroku, it's the path of least resistance I've found. This article goes into a little more detail on your scenario. https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851