CODEWITHSUNDEEP
node.jsreactjsgitherokunpm
Stanton Dobson
Stanton Dobson

Reputation: 51

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

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:        > [email protected] 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:        > [email protected] 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! [email protected] build: `react-scripts build`
remote: npm ERR! Exit status 126
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] 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! [email protected] 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 [email protected] 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: enter image description here

Upvotes: 0

Views: 480

Answers (1)

Phuong Nguyen
Phuong Nguyen

Reputation: 11

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!

Upvotes: 1

Related Questions