Can't run React project due to react-scripts error - reactjs

I'm trying to start a React project with npm start and the following error is shown:
$ npm start
> client#0.1.0 start
> react-scripts
Unknown script "undefined".
Perhaps you need to update react-scripts?
See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases
I have updated react-scripts to last version, npm install, even I pulled a version of the project without the previous changes and still the error is shown.
I share the package.json. I appreciate any help and suggestions in advance.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.1",
"#testing-library/user-event": "^12.2.2",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-input-range": "^1.3.0",
"react-redux": "^7.2.4",
"react-router": "^5.2.1",
"react-router-dom": "^5.2.1",
"react-scripts": "^5.0.1",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"styled-components": "^5.3.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts",
"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"
]
}
}```

Use npm run start.
If that doesn't work, try removing your package-lock.json and node_modules folder, then run npm install and try again.

Related

React: stuck at wait-on at localhost:3000

I have been trying to implement electron and react together ,with the below package.json
{
"name": "loader",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"cross-env": "^7.0.3",
"electron-is-dev": "^2.0.0",
"react": "^18.2.0",
"react-countup": "^6.3.1",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-idle-timer": "^5.4.2",
"react-loader-spinner": "^5.3.3",
"react-rnd": "^10.3.7",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"react-spring": "^9.5.3",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"main": "public/main.js",
"homepage": "./",
"scripts": {
"react-start": "react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test --env=jsdom",
"react-eject": "react-scripts eject",
"electron-build": "electron-builder",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000/ && electron .\""
},
"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": {
"concurrently": "^7.5.0",
"electron": "^21.2.3",
"electron-builder": "^23.6.0",
"wait-on": "^6.0.1"
}
}
It is clear that concurrently is being used to run all the commands together at same time. Now when I do yarn start, all commands are executed along with the react-start, but even after the react is available at http://localhost:3000 the wait-on never executes further and is stucked, eventually the electron never starts.
If tested without wait-on then all commands are executed well along with the electron.
Can someone guide on this?
I had the same issue.
All I needed to do was to change it from wait-on http://localhost:3000 to wait-on http://127.0.0.1:3000.
Hope that helps!

When I type npm start I get an error resolutions in package.json

I was trying to start a project with 'npx create-react-app'.
However,
#types/eslint v8.4.4 missing from NPM registry same Error
so i tried 'npx create-react-app#5.0.1 test --template typescript --ignore-existing'
I solved the problem with that command, but another problem occurred
I typed the npm start command in vscode and an error as shown in the picture occurred.
error
So I put the following code in package.json.
{
"name": "test",
"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",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.42",
"#types/react": "^18.0.14",
"#types/react-dom": "^18.0.5",
"gh-pages": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-query": "^3.39.1",
"react-router-dom": "^5.3.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.4",
"styled-components": "^5.3.5",
"typescript": "^4.7.4",
"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": {
"#types/eslint": "^8.4.3",
"#types/react-helmet": "^6.1.5",
"#types/react-router-dom": "^5.3.3",
"#types/styled-components": "^5.1.25"
},
"overrides": {
"#types/eslint": "8.4.3"
}
}
And Installed
npm i #types/eslint#8.4.3
npm i -D #types/eslint#8.4.3
But I keep getting an error like the picture...
npm v8.5.5
node v16.15.0

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

Bad Gateway in an express and react app deployed on Elastic Beanstalk despite a successful build

I am trying to deploy an express app with react as a front end framework on Elastic Beanstalk. The build succeeds however the website always returns with a Bad Gateway 502. I am trying to build the react app on eb and start the node.js server after react builds successfully, using a deploy script defined in package.json and a Procfile.
Package.json
{
"name": "ecosys",
"version": "0.1.0",
"private": true,
"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",
"cross-env": "^7.0.3",
"express": "^4.17.2",
"history": "5",
"i18next": "^21.6.4",
"i18next-browser-languagedetector": "^6.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.2",
"react-icons": "^4.3.1",
"react-query": "^3.32.1",
"react-router-dom": "6",
"react-scripts": "^4.0.3",
"react-select": "^5.2.1",
"react-toastify": "^8.1.0",
"react-transition-group": "^4.4.2",
"styled-components": "^5.3.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "node server.js",
"build": "react-scripts build",
"deploy": "npm run build && npm run start",
"dev": "react-scripts start",
"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"
]
}
}
Procfile
web: npm run deploy
I think that the react build succeeds but it never launches the node.js server, It never runs npm run start.

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!

Resources