/bin/sh: SET: command not found - reactjs

I cloned a react project that contains the following package.json. After yarn, yarn start gave me the following error. I tried yarn add react-scripts start, but it still did not work.
I am using MacOS.
Could anyone help?
$ yarn start
yarn run v1.21.1
$ SET PORT=8000 && react-scripts start
/bin/sh: SET: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.8",
"#microsoft/office-js-helpers": "^1.0.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-stripe-elements": "^6.0.4",
"#uifabric/react-cards": "^0.109.49",
"axios": "^0.19.2",
"color": "^3.1.2",
"cross-storage": "^1.0.0",
"dva": "^2.4.1",
"dva-model-creator": "^0.4.3",
"formik": "^2.1.4",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"monaco-editor": "^0.20.0",
"node-sass": "^4.13.1",
"office-ui-fabric-react": "^7.105.4",
"query-string": "^6.11.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-dom": "^16.13.1",
"react-monaco-editor": "^0.35.0",
"react-scripts": "3.4.1",
"react-stripe-elements": "^6.1.1",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.0.1",
"typescript": "^3.8.3",
"yup": "^0.28.3"
},
"scripts": {
"start": "SET PORT=8000 && react-scripts start",
"build": "react-scripts --max_old_space_size=8096 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": {
"#types/color": "^3.0.1",
"#types/cross-storage": "^0.8.29",
"#types/jest": "^25.1.4",
"#types/lodash": "^4.14.149",
"#types/node": "^13.9.5",
"#types/query-string": "^6.3.0",
"#types/react": "^16.9.27",
"#types/react-dom": "^16.9.5",
"#types/react-redux": "^7.1.7",
"#types/styled-components": "^5.0.1",
"#types/yup": "^0.26.33"
}
}

On Posixes, the most compatible is "env PORT=8000 react-scripts start".
This is why the cross-env package exists; it does the right thing on both Windows and Posix systems.

On MacOS you don't need the SET. Change the content of the start script of the package.json to PORT=8000 react-scripts start.
Better yet, to support cross-OS environment variables setting you could use something like cross-env .
To do so, add the dependency to cross-env (yarn install --dev cross-env) and then rewrite the start script to cross-env PORT=8000 react-scripts start.

I think what you're looking for is this, to set the environment variable before executing the command: PORT=8000 react-scripts start, as Linux/Unix systems don't use the SET command to set environment variables like Windows does
If you're having issues with the react-scripts command not being found, directly reference the local version of the package using this command: PORT=8000 ./node_modules/.bin/react-scripts start

Related

Cannot find module acorn.js

I got some error message 'Cannot find module ..\acorn.js' when write 'npm start'
package.json
{
"name": "eats-mate-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"acorn": "^8.8.0",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-kakao-maps-sdk": "^1.1.1",
"react-persist": "^1.0.2",
"react-redux": "^8.0.2",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.4.1",
"save": "^2.5.0",
"slick-carousel": "^1.8.1",
"source-map": "^0.7.4",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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/acorn": "^6.0.0"
}
}
Below is my node_modules' contents that start with 'a'
I cannot find node_modules\acorn , as terminal's error message said.
But I already done 'npm install --save acorn' and no new folders related to acorn has been created in node_modules.
Even I removed package-lock.json file and write 'npm install', it didn't work to solve the problem.
Please help!
delete your node_modules folder, and your package-lock.json, and then run npm install
first you should remove acorn from package and npm install once you finish try to install it alone.

I'm not able to run the react web project and npm install also not working

I'm getting following errors if npm install
i tried clean cache also like this
if i directly run the project it's shows react it shows
"'react-scripts' is not recognized as an internal or external command"
this is the package.json code used in my project i'm not getting what's the issue bcoz i'm new to react.let me know how to run the project.. thanks in advance..
{
"name": "pay-management",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/core": "^11.0.0",
"#emotion/react": "^11.1.5",
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.1",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.57",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"autoprefixer": "7",
"change-case": "^4.1.1",
"lodash": "^4.17.21",
"material-ui": "^0.20.2",
"material-ui-bootstrap": "^2.0.0",
"moment": "^2.29.1",
"postcss": "7",
"postcss-flexbugs-fixes": "4",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-csv-importer": "^0.3.0",
"react-dom": "^17.0.1",
"react-dropzone": "^11.2.4",
"react-moment": "^1.1.1",
"react-number-format": "^4.4.4",
"react-papaparse": "^3.11.1",
"react-resize-observer": "^1.1.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-table": "^7.6.2",
"react-timer-mixin": "^0.13.4",
"web-vitals": "^0.2.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"
]
},
"globals": {
"_": true
},
"homepage": "url",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#tailwindcssinjs/macro": "^0.17.0",
"cross-env": "^7.0.2",
"tailwindcss": "^2.0.1-compat"
},
"main": "index.js",
"author": "",
"license": "ISC"
}
The error message you're seeing trying to run build makes sense. You can't run your build script if you haven't installed the dependencies first - since you don't have the libraries necessary to compile the project yet! npm run build is a synonym for "react-scripts build" according to your package.json file, so you need react (which is part of your dependency list). You have to solve the dependency conflicts first - then you can run build.
The npm dependecy conflict message tells you the steps to follow in order to solve them, read them and follow those. AFTER trying those official steps, if they don't help, as the last resort I would try upgrading manually autoprefixer to be v 10.0.2 ~it appears you installed it manually while developing without knowing tailwind was going to use it internally.
Hope that helps.

Netlify Deploy Fails: react-scripts: not found

The app was built with create-react-app.
Everything works fine locally. However, I kept getting this error from Netlify
I've tried to install react-scripts but it didn't work. Same error causing Netlify deployment failure.
Netlify Log Details -
$ yarn build
yarn run v1.22.17
$ cd client && npm run build
my-app#0.1.0 build
react-scripts build
sh: 1: react-scripts: not found
error Command failed with exit code 127.
───────────────────────────────────────────────────────────────
Error message
Command failed with exit code 127: yarn build
Error location
In Build command from Netlify app:
yarn build
package.json file in my client folder
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8888",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"dotenv": "^10.0.0",
"firebase": "^9.1.2",
"lodash.memoize": "^4.1.2",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.5",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"react-stripe-checkout": "^2.6.3",
"redux": "^4.1.1",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.4.0",
"reselect": "^4.0.0",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.3",
"workbox-broadcast-update": "^5.1.3",
"workbox-cacheable-response": "^5.1.3",
"workbox-core": "^5.1.3",
"workbox-expiration": "^5.1.3",
"workbox-google-analytics": "^5.1.3",
"workbox-navigation-preload": "^5.1.3",
"workbox-precaching": "^5.1.3",
"workbox-range-requests": "^5.1.3",
"workbox-routing": "^5.1.3",
"workbox-strategies": "^5.1.3",
"workbox-streams": "^5.1.3"
},
"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"
]
}
}
Is there anything wrong with my dependencies?

Error: yarn start - error Command “start” not found

yarn run v1.22.4
error Command "start" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
This error comes up after I type yarn start in command prompt...
The main problem is there is no 'scripts' in package.json..
can anyone help please?
Here's an example package.json from one of my reactjs projects.
Depending on what environment/framework you work on, you are probably looking for the scripts object as defined below.
{
"name": "bitmex-dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/react": "^16.9.41",
"#types/react-dom": "^16.9.8",
"axios": "^0.19.2",
"bitmex-realtime-api": "^0.4.3",
"form-data": "^3.0.0",
"lodash": "^4.17.15",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-scripts": "3.4.1",
"react-tradingview-widget": "^1.3.2",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"semantic-ui-react": "^0.88.2",
"typescript": "~3.7.2",
"ws": "^7.3.1"
},
"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": {
"#types/lodash": "^4.14.157",
"#types/react-redux": "^7.1.9",
"#types/redux-logger": "^3.0.8",
"#types/socket.io-client": "^1.4.33",
"#types/ws": "^7.2.6",
"redux-devtools-extension": "^2.13.8"
}
}
If you are using nodejs, you want something like this:
...
"scripts":{
"start": "node index.js"
....
}
Here's a brief explanation on package.json
If you are creating a new react project, you may want to use create-react-app as it handles all the initial configurations and installs all the required dependencies too
https://reactjs.org/docs/create-a-new-react-app.html#create-react-app
When you write some code in a .js file you execute the content of that file passing it are argument in your terminal || shell to node command like this
Here I presume you have a file which is named index.js
node ./index.js
So instead of having to type this command every time you can add a script property in your package.json file so it will reference that command every time you execute in your terminal npm run start || npm start or yarn start if you are using Yarn.
This will look like this
// package.json
{
"scripts": {
"start": "node ./index.js",
}
}
Generaly you specify the entry point where you application execution must start.
You can learn more about package.json file here Creating a package.json file and The package.json guide

"serve -s build" returns "serve: command not found"

I cloned a react project, which was probably developed under pure Windows, into WSL of my windows.
It seems that, to launch a react app properly in IE and Edge, we need to build the project and serve it. So I did yarn add react-scripts, yarn install and yarn build, which gave me:
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
Then,
$ yarn global add serve
yarn global v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "serve#11.3.0" with binaries:
- serve
Done in 1.49s.
$ serve -s build
No command 'serve' found, did you mean:
Command 'pserve' from package 'python-pyramid' (universe)
Command 'server' from package 'rsplib-legacy-wrappers' (universe)
serve: command not found
Here is package.json. Does anyone know what's the problem?
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.8",
"#microsoft/office-js-helpers": "^1.0.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-stripe-elements": "^6.0.4",
"#uifabric/react-cards": "^0.109.49",
"axios": "^0.19.2",
"color": "^3.1.2",
"cross-storage": "^1.0.0",
"dva": "^2.4.1",
"dva-model-creator": "^0.4.3",
"formik": "^2.1.4",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"monaco-editor": "^0.20.0",
"node-sass": "^4.13.1",
"office-ui-fabric-react": "^7.105.4",
"query-string": "^6.11.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-dom": "^16.13.1",
"react-monaco-editor": "^0.35.0",
"react-scripts": "^3.4.1",
"react-stripe-elements": "^6.1.1",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.0.1",
"typescript": "^3.8.3",
"yup": "^0.28.3"
},
"scripts": {
"start": "SET PORT=8000 && react-scripts start",
"build": "react-scripts --max_old_space_size=8096 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": {
"#types/color": "^3.0.1",
"#types/cross-storage": "^0.8.29",
"#types/jest": "^25.1.4",
"#types/lodash": "^4.14.149",
"#types/node": "^13.9.5",
"#types/query-string": "^6.3.0",
"#types/react": "^16.9.27",
"#types/react-dom": "^16.9.5",
"#types/react-redux": "^7.1.7",
"#types/styled-components": "^5.0.1",
"#types/yup": "^0.26.33"
}
}
in package.json u can add some step like
"scripts": {
...
"start:prod": "serve -s dist -l 3000"
...
}
after that run locally
npm run-script start:prod
you need to add serve globally with compatible version with node version.

Resources