error with npm start after create-react-app - reactjs

I am new to React.js. And I followed the tutorials in https://github.com/facebook/create-react-app. It worked fine while running npm init react-app my-app. But I got error when I run npm start.
detailed error message:
I have tried https://stackoverflow.com/questions/39959900/npm-start-error-with-create-react-app. That dose not work for me. I also tried move my project folder to upper directory, which still doesn't work.....
Can anyone fix it?
add: package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "2.0.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

try npm install -g
to update npm
then rm -rf node_modules to delete the existing modules
finally npm install install the new project dependencies

Related

"npm run deploy" not working after trying to deploy my react app to github

"npm run deploy" not working after trying to deploy my react app to github and getting: ENOENT: no such file or directory, stat 'C:s<path\build>'C:\Users\USER 2021\Desktop\robotfriends>npm run deploy npm WARN config global --global, --local are deprecated. Use --location=global instead.
robotfriends#0.1.0 predeploy
npm run build
npm WARN config global --global, --local are deprecated. Use --location=global instead.
robotfriends#0.1.0 build
react-scripts build
robotfriends#0.1.0 deploy
gh-pages -d build
ENOENT: no such file or directory, stat 'C:\Users\USER 2021\Desktop\robotfriends\build'
here's my Package.json :
{
"homepage": "https://Aligumi.github.io/robotfriends",
"name": "robotfriends",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"tachyons": "^4.12.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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": {
"gh-pages": "^4.0.0"
}
}
Found the solution my self! :)
I had to run npm run build to create the build folder. Then ran npm run deploy

npm start not working in create-react-app: missing script:start

I tried to update my version of create-react-app by doing this:
If you've previously installed create-react-app globally via npm
install -g create-react-app, we recommend you uninstall the package
using npm uninstall -g create-react-app to ensure that npx always uses
the latest version.
But now, when I run npm start, i get an error message:
missing script: start
But in the package.json from my app, i found the start script:
{
"name": "dropzone-montessori",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.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"
]
}
}
Anybody knows what's happening?

How can I deploy react app on github pages?

I try to deploy my react web app to github pages but when i can't find website online
In the console, it says that the app is ready to publish and i should run command npm run deploy but i see the same message every time i run that command
Here's package.json file:
{
"name": "weather-app",
"version": "0.1.0",
"private": true,
"homepage": "http://shotiko-forecast.github.io/weather",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-scripts": "1.1.4",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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"
]
}
}
install dependencies to the project.
> npm i gh-pages
In your package.json add script and homepage
"homepage": "https://username.github.io/repo-name",
"scripts": {
"deploy": "gh-pages -d build"
}
run build Script to build for production
npm run build
run deploy script to deploy your code to the-pages it automatically push on git-hub gh-pages branch and auto-selected on gh-pages branch you can check settings > GitHub pages.
npm run deploy
now it time to check your
https://username.github.io/repo-name
The name of your React app is weather-app. I assume that the github repository for the app is named as weather-app. There is an error in your package.json file. The homepage property is set incorrectly.
It should be set as,
"homepage": "http://<<github-user-name>>.github.io/<<github-repo-name>>"
In your case, change weather to weather-app and everything should work fine

Why ELIFECYCLE error occurs while running npm start?

I had created a new react project and while running it using npm start it shows me ELIFECYCLE error.
I had tried deleting the package.lock.json and node_modules and removed the dependencies and done a fresh npm install. Eventhough the same error occurs again.
This is my package.json file:
{
"name": "tables",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.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"
]
}
}
C:\Users\Srinithi K\tables
this is my path where the react project called tables is present.
output after running npm start:
This might be due to package-lock.json file. If you had not run eject, it might not have occurred. Installing the latest version of npm would help.
Try these fixes:
Go to your application directory in the command prompt,
rm -rf node-modules
npm install npm#latest -g
npm install
You might consider the following command if the above fix doesn't work.
npm install react-scripts

Deploying React App on Github Deploys New App and My Files are Missing

I followed all the steps for deploying my React App , but it deploys a New React App on Github and My Components and My Code is not there .
I added "homepage" and "predeploy" , "deploy" in my Package.json file but when those files got on github , it disappeared .
Here is link to Github repository : https://github.com/cyumair/smartbrainapp
//This is my Package.json
{
"homepage": "https://github.com/cyumair/smartbrainapp",
"name": "final",
"version": "0.1.0",
"private": true,
"dependencies": {
"clarifai": "^2.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"react-tilt": "^0.1.4",
"tachyons": "^4.11.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "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": {
"gh-pages": "^2.0.1"
}
}
//"predeploy" and "deploy" got disappeared When Uploaded on Github
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
your .gitignore file currently ignores the build folder. that's why your files did not get pushed onto your github repo.
# production
# /build <= comment out this line
The Problem Is Solved By Changing # production
# /build
to # build / in .gitignore file
and changing "homepage" : "" in package.json file.
And then Running Following Commands In Console :
$git add .
$git status (This showed that my missing files were new and needed commit )
$git commit -m "adding the missing files "
$git push -u origin master
$npm run deploy
I Deleted The Old Repository And Applied The Same Steps on New One , You Can See Working React App at: https://cyumair.github.io/smartbrain/
//package.json file
"homepage":"https://github.com/cyumair/smartbrainapp"
//Changed To
"homepage":"https://cyumair.github.io/smartbrainapp"
//.gitignore file
#production
/build
//Changed To
#production
build/

Resources