Struggling to deploy my react project to heroku due to this `remote: sh: 1: react-scripts: Permission denied error` - node.js

Question

I know that this answer has been asked in the past but I could not find a solution that pertains to my case. I've tried reinstalling my node_modules and my package-lock files, I've made sure that my .gitignore file properly excludes node_modules from the build. I'm not entirely sure what's going wrong when I try to deploy. I've been working on this for a couple of days, trying to diagnose the issue to no avail. So I figured that I'd try here. I am using a server-client setup wherein I have separate package files for my server-side code and my client-side code. Here are the package files, my gitignore file and
the error log from the heroku build session:
CLIENT PACKAGE.JSON
{
"name": "lang-flash",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"faker": "^4.1.0",
"firebase": "^7.14.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"stripe": "^8.39.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
SERVER PACKAGE.JSON
{
"name": "lang-flash",
"version": "1.0.0",
"engines": {
"node": "12.16.1",
"npm": "6.13.4"
},
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client": "cd client && npm start",
"server": "nodemon server.js",
"build": "cd client && npm run build",
"dev": "concurrently --kill-other-on-fail \"npm server\" \"npm client\"",
"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/7ujh6/LangFlashApp.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/7ujh6/LangFlashApp.git/issues"
},
"devDependencies": {
"concurrently": "^5.1.0",
"nodemon": "^2.0.3"
},
"homepage": "https://github.com/7ujh6/LangFlashApp.git#readme",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "8.2.0",
"express": "^4.17.1"
}
}
GIT IGNORE FILE (in the server directory there isn't another git ignore file in the client directory)
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
HEROKU BUILD LOG
remote: -----> Build
remote: Detected both "build" and "heroku-postbuild" scripts
remote: Running heroku-postbuild
remote:
remote: > lang-flash#1.0.0 heroku-postbuild /tmp/build_fcc986a2385b8c8783c9e93e3af2bd41
remote: > cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build
remote:
remote: audited 1748 packages in 13.332s
remote:
remote: 59 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: found 2 vulnerabilities (1 low, 1 high)
remote: run `npm audit fix` to fix them, or `npm audit` for details
remote: audited 1748 packages in 11.758s
remote:
remote: 59 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: found 2 vulnerabilities (1 low, 1 high)
remote: run `npm audit fix` to fix them, or `npm audit` for details
remote:
remote: > lang-flash#0.1.0 build /tmp/build_fcc986a2385b8c8783c9e93e3af2bd41/client
remote: > react-scripts build
remote:
remote: sh: 1: react-scripts: Permission denied
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 126
remote: npm ERR! lang-flash#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 126
remote: npm ERR!
remote: npm ERR! Failed at the lang-flash#0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.jCutB/_logs/2020-05-14T22_31_39_955Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 126
remote: npm ERR! lang-flash#1.0.0 heroku-postbuild: `cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build`
remote: npm ERR! Exit status 126
remote: npm ERR!
remote: npm ERR! Failed at the lang-flash#1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.jCutB/_logs/2020-05-14T22_31_39_969Z-debug.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile React.js (create-react-app) multi app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to lang-flash.
remote:
To https://git.heroku.com/lang-flash.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/lang-flash.git'
Edit: I forgot to mention that it appears that my react scripts file has full permissions:

Answer 1

hey have you found the answer yet?
I tried:
if (process.env.NODE_ENV === "production"){
app.use(express.static(path.join(__dirname,"client", "build")))
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname,"client", "build", "index.html"));
});
}
and i have to npm install react-scripts in the server package.json file.
Also you have to put the "proxy": "http://localhost:5000" at the last curly brace in client package.json file. That proxy is the server port.
It works for me!