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

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

Related

unable to run 'yarn run build'

I'm trying to build my site.
It works when I run yarn start
Now I want to build it.
I run yarn run build and i get this error
yarn run build
yarn run v1.22.17
warning package.json: No license field
error Command "build" not found.
I have a package.json that contains the same script that allowed previous projects to run.
{
"name": "bl_site_12_28",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/icons": "^1.1.1",
"#chakra-ui/react": "^1.0.0",
"#emotion/react": "^11.0.0",
"#emotion/styled": "^11.0.0",
"#testing-library/jest-dom": "^5.9.0",
"#testing-library/react": "^10.2.1",
"#testing-library/user-event": "^12.0.2",
"chakra-ui-markdown-renderer": "^4.0.0",
"framer-motion": "^4.0.0",
"react": "^17.0.2",
"react-audio-player": "^0.17.0",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-icons": "^3.11.0",
"react-markdown": "^7.1.2",
"react-player": "^2.9.0",
"react-router-dom": "^6.2.1",
"react-scripts": "^3.0.1",
"web-vitals": "^0.2.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"
]
}
}
I tried running yarn run as another post suggested to get a list of possible posts, but i get a similar message above. It seems that yarn is not reading my package.json
#KyleRifqi's helpful comment was all that was needed.
I used ls to identify the files in the current directly I was running yarn run build from.
I realized the package.json was not in that directory. I cd into the correct directory and then it worked

Can't resolve '#babel/runtime/helpers/esm/objectSpread2'

{
"version": "0.1.0",
"private": true,
"dependencies": {
"#mui/icons-material": "^5.0.1",
"#reduxjs/toolkit": "^1.6.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"firebase": "^9.0.2",
"firebase-tools": "^9.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.5",
"react-router-dom": "^5.3.0",
"react-scripts": "2.0.0",
"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1",
"styled-components": "^4.1.3"
},
"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 op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/runtime": "^7.15.4"
}
}
while running npm run build this error popup I tried to install babelcore and runtime manually but it didn't fixed it. Is there any way to fix this??
please help me.
thanks in advance:)
I ran into this problem today when updating all our dependencies.
We configure webpack ourselves and aren't running a vanilla Create-React-App setup so our environments are different to yours.
For what it's worth...
I installed the dependency and tried turning it off an on again, seemed to do the trick.
Explicitly declare the #babel/runtime in package.json file
"devDependencies": {
....other dependencies,
"#babel/runtime": "^7.15.4",
}
Delete the package-lock.json file
Re-install dependencies
npm install
Error went away, your set up might be different with create-react-app so I hope this works for you too!

Deploying create-react-app --template-typescript to gh pages

I have a problem with deploying typescript react app, all I get is the most outer element from the MainTemplate.tsx file, I should be seeing a logging screen, there are no routes available for me that I have available locally. Also, I have done npm run build many times now, and it is saying that my last deploy was 14 hours ago, how can I refresh it? I tried to change my deply script to this one but did not work:
"deploy": "./node_modules/gh-pages/bin/gh-pages-clean.js && gh-pages -d build"
this is my package.json
{
"homepage": "https://dziekonskik.github.io/project-money-front",
"name": "project-money-front",
"version": "0.1.0",
"private": false,
"proxy": "http://localhost:3000",
"dependencies": {
"#aws-amplify/ui-react": "^1.2.3",
"#reduxjs/toolkit": "^1.5.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.20.14",
"#types/react": "^16.14.8",
"#types/react-dom": "^16.9.13",
"#types/react-redux": "^7.1.16",
"#types/styled-components": "^5.1.9",
"aws-amplify": "^4.1.1",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"formik": "^2.2.9",
"gsap": "^3.7.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"styled-reset": "^4.3.4",
"typescript": "~4.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "./node_modules/gh-pages/bin/gh-pages-clean.js && gh-pages -d 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"
]
},
"devDependencies": {
"#types/react-router-dom": "^5.1.7",
"gh-pages": "^3.2.3"
}
}
Thanks!
Thank you #yume_chan changing BrowserRouter component to HashRouter did the job. Also there was no need to modify deploy script when I changed back to
"deploy": "gh-pages -d build"
worked as well with HashRouter
Regards!

/bin/sh: SET: command not found

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

"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