Yarn start doesn't work - Bin/sh: command not found - package.json

When using yarn start on my frontend, I keep getting the error:
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Here is my code
"name": "frontend",
"version": "0.1.0",
"license": "MIT",
"description": "Typescript starter template for hardhat, ethers and react projects using typescript and #web3-react",
"engines": {
"node": "16.13.1",
"npm": "8.1.2"
},
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"#types/styled-components": "^5.1.18",
"#web3-react/core": "^6.1.9",
"#web3-react/injected-connector": "^6.0.7",
"ethers": "^5.5.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"typescript": "^4.4.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"
]
},
"devDependencies": {
"#types/styled-components": "^5.1.18"
}
}
Any ideas?

Related

Running npm run build produces same output

When running npm run build on a project where I've changed something on its package.json, produces the exact same output as if I hadn't done any changes after running npm run build again.
I'm trying to upload the build folder to Pinata and it's producing the same hash (CID), so both folders (pre and post modification) are exactly the same.
What could be happening here?
This is my package.json file:
{
"name": "react-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.8",
"sass": "^1.51.0",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4",
"web3": "^1.8.1",
"tailwindcss": "^3.1.8"
},
"scripts": {
"start": "PORT=3001 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"
]
},
"homepage":"./"
}
Thanks!
npm run build just runs react-scripts build.
If you updated your dependencies, you need to npm install or npm update them first.

npm run build fail to compile. When npm audit fix, I got this

background: I did coding for ReactJS app and wanted to deploy on Netlify or Vercel. When I npm run build, I got error.
npm run build error
When I typed npm audit fix, I got this.
npm audit fix msg
I got stuck for days and dont know why I cant deploy my client app.
Here is my package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.5.10",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.3",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"apollo-link-context": "^1.0.20",
"graphql": "^16.3.0",
"graphql-tag": "^2.12.6",
"jwt-decode": "^3.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-moment": "^1.1.1",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.2",
"svgo": "^2.8.0",
"web-vitals": "^2.1.4"
},
"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"
]
},
"devDependencies": {
"terser-webpack-plugin": "^5.3.1"
},
"proxy": "https://fathomless-mountain-12345.herokuapp.com/"
}

proxy in package.json not working in frontend folder while its working in admin folder

this is my package.json with the proxy that i'm using,
I've tried to use cors inside index.js in backend but it didn't work, I've also tried to to make .env file and write my proxy inside it, but it didn't work.
this process it working on my admin folder
"name": "frontend",
"version": "0.1.0",
"proxy": "http://localhost:8800/api",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"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"
]
},
"devDependencies": {
"sass": "^1.49.8"
}
}

Heroku deployment: Cannot find module: 'react-bootstrap'. Make sure this package is installed

Build failure
First MERN app. Having trouble deploying to Heroku. Everything worked when running locally. I've tried uninstalling/reinstalling react-bootstrap. What could be the problem?
Here's my package.json:
{
"name": "mern-workout-app",
"version": "0.1.0",
"engines": {
"node": "13.8.0"
},
"private": true,
"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",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"styled-components": "^5.1.0"
},
"scripts": {
"start": "cd backend && npm install && node index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbild": "cd client && npm install && npm run build"
},
"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"
]
}
}

"Support for the experimental syntax 'decorators-legacy' isn't currently enabled" error

I'm using mobx in a react app and I keep getting this error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled in the title even though I tried this solution, deleted node_modules folder and npm install-ed, here are my files:
// .babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
// package.json
{
"name": "app-spotify",
"version": "0.1.0",
"private": true,
"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",
"mobx": "^5.15.4",
"mobx-react": "^6.1.8",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0"
},
"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"
]
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.0",
"#babel/preset-env": "^7.1.0"
}
}

Resources