Create-React-App deployment to Heroku failed with ` react-scripts: not found`
Solution 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 :)
Solution 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.
Solution 3
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"
}
Solution 4
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!
Solution 5
Can you share how your Package.json file Scripts look? I actually deployed to Heroku yesterday and it seems to be working quite ok for me.
Maybe your dependencies are not added correctly in your package.json.
This is how my scripts look (if you don't have any scss/less/sass ignore the first 2 scripts):
"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start": "npm run start:server",
"watch": "npm-run-all --parallel watch-css start:*",
"start:server": "node server/server.js",
"start:client": "react-scripts start",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "npm run build"}
When running in Development to take advantage of the Hotrealoding I run
npm run watch
And for PROD I run
npm run build
And then I deploy to Heroku. Try to check the logs from Heroku in a separate Terminal window so you can check what is wrong with your deployment.
Simply use heroku logs
to display the last 100 lines of your logs.
Or to tail the logs in real-time: heroku logs -t
.
Philippe Cohen
Updated on October 16, 2021Comments
-
Philippe Cohen over 2 years
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
inpostinstall
script from the nodepackage.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:- 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.
- Why the react-scripts are disappearing and I have to run multiple times the
npm install
.
-
Philippe Cohen about 7 yearsThis was exactly the issue and I've received the answer from Mars in this github issue post
-
Philippe Cohen about 7 yearsThe solution is basically in this line:
"postinstall": "knex migrate:latest && if [ \"$NODE_ENV\" = production ]; then cd web_app/ && npm install --only=dev && npm install && npm run build; fi"
-
Tom about 7 yearswould be good to mark this as the answer so it appears at the top.
-
PhoenixB about 6 yearsWhat if we use yarn? I tried: yarn install --only=dev && yarn install && npm run build but that did not seem to make changes to package lock file
-
LOTUSMS almost 5 yearsThis is the ticket. No need to over think it. Perfect answer if you ask me
-
Jonathan Bareket over 4 yearsThank you, saved me another week of troubleshooting!
-
drewkiimon almost 4 yearsDefinitely the best answer I have found on the internet
-
Marwen Trabelsi almost 4 yearsnot the best, the best is for Alexander, easy and only 1 step!