What to put in package json to run create-react-app - reactjs

I'm trying to follow some introductory react courses and I can't run npm start to get create-react-app working. I'm on windows 10. The error I usually get is "npm ERR! missing script: start"
I should mention I'm doing this from the command line, which is my Node.js command prompt
Read through some documentation:
https://docs.npmjs.com/creating-a-package-json-file
https://www.npmjs.com/package/npm-start-command
Searched stack overflow:
Missing Script Start, etc.
Ran npm install npm-start-command --save-dev
Tried downgrading npm to 4.6.1, then upgraded back to the latest
Created several versions of package.json with npm init
I've included "start": and various ideas under the scripts portion of package.json including
"start": "node index.js"
"start": "index.js"
"start": "server.js"
{
"name": "react",
"version": "1.0.0",
"description": "react json ",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Julie",
"license": "ISC"
}
The problem is there is no index.js so far because none of the modules I'm creating to learn react have started any code yet. This is the number one step in the courses I'm trying to take on Pluralsight and eggheads.io. Then I should just be able to go to http://localhost:3000/ and see the Start React image.
react-fundamentals with author liam-mclennan on Pluralsight has only these directions to start:
1. npm install -g create-react-app
2. create-react-app click-counter (this is the name of the app)
3. cd click-counter
4. npm start
I have tried putting the package.json both in the create-react-app dir and click-counter (the project folder below it)
Eggheads.io "Start Learning React" has these directions:
1. npm -i create-react-app -g
2. create-react-app react-app
3. cd react-app
4. react-app subl .
5. npm start
I get a slightly different error here:
internal/modules/cjs/loader.js:583
throw err;
^
Error: Cannot find module 'C:\Users\julie\react-app\examples\app.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:279:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:752:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-app#1.0.0 start: node ./examples/app.js
And the package.json was created automatically:
{
"name": "react-app",
"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"
]
}
}

Related

Unable to start react app using npm start

I have downloaded a source code and am unable to use npm start to start the react app.
when I use npmstart I get the following errors.
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/afrasiab./.npm/_logs/2023-01-13T04_36_09_195Z-debug-0.log
following is package.json
{
"name": "react-devtools",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"react": "16.8.6",
"react-dom": "16.8.6",
"react-scripts": "3.2.0"
},
"devDependencies": {
"typescript": "3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Unable to use npm start command on my react app.
Correct command for starting a react application is as :
npm run start
I think you don't install all dependencies. Agree with #Dipten
Use
npm install
I also had issue while using react first time. i have solved this issue with these lines.
npm rm -g create-react-app
npm install -g create-react-app
npx create-react-app my-app
you can add scripts in the package.json
,"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
This error also happens if you didn't open your project from the root of the project. Make sure to cd into the folder before opening it inside VS code.
Seems like you aren't running npm start in the root directory. So first cd to the root directory and run npm start.
Also, please consider attaching a screenshot of your folder structure because it will be easy for others to help you

What build configuration for React on Azure Static Web Apps?

I have seemingly tried everything and see conflicting instructions on deploying a React app (without API) to Azure Static Web Apps even from Microsoft. Has anyone done this successfully?
The latest doc I've used is:
https://learn.microsoft.com/en-gb/azure/static-web-apps/get-started-portal?tabs=react&pivots=github
which is for creating the SWA in the portal though I've used others as well with problems.
I've now arrived at this error:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! percentage-calculator#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the percentage-calculator#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /github/home/.npm/_logs/2022-07-12T19_38_33_349Z-debug.log
---End of Oryx build logs---
Oryx has failed to build the solution.
Here is my file structure if that matters:
react-app ->src ->components ->index.js,App.js etc..
->public ->index.html etc..
->build (build is gitignored)
->node_modules etc..
My azurestaticwebapps... yml file contains:
app_location: "/"
api_location: ""
output_location: "build"
https://github.com/markhardy/percentage-calculator/runs/7308960687?check_suite_focus=true
Can someone explain what I'm doing wrong? I'm at a loss at this point especially with conflicting instructions from Microsoft.
Seems you have warnings in your code, so the compiler doesn't like it.
Simply change the yml file as below:
under build_and_deploy_job, add:
env:
CI: false
This will stop treating warnings as errors.
Has anyone done this successfully?
We have followed the same document which you have provided and able to build and deploy React static web App from portal without any issues.
Build and Deploy Job:
package.json file:
{
"name": "hello",
"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",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"playwright_test": "playwright 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": {
"#playwright/test": "^1.22.2"
}
}
Try to add devDependencies in your package.json file and check once.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.3.2 (node_modules/fsevents):
As per this Document, we can add optionalDependencies in your package.json file or can run npm install -f.
Please refer Troubleshooting deployment and runtime errors for Static Web Apps for more information.

npx create-react-app test somehow gives webpack error

so I don't remember updating anything, but npx stopped working for me today!
other older react projects still working (npm start). So when I'm creating new react project:
npx create-react-app test
cd test
npm start
I got this webpack error:
Failed to compile.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module.rules[2].oneOf[1].include: The provided value "/home/coding/!convr/test/src" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in log:
package.json
{
"name": "test",
"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",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.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 dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
PS: sorry for making it that long, but I need to figure it out

Can't run npm install on brand new create-react-app

I have a very strange error when trying to create a react app using the create-react-app module. On my computer it is very easy to recreate the error:
npx create-react-app test-project --typescript
The project works fine. But if I delete the node_modules folder and do:
npm install
I get this error:
npm install
npm WARN deprecated flatten#1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated left-pad#1.3.0: use String.prototype.padStart()
npm ERR! Unexpected end of JSON input while parsing near '...3s4pkvleO6z4pcCFRth5v'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/computer/.npm/_logs/2019-08-14T14_44_36_086Z-debug.log
Funny thing is, if I remove the "react-scripts" from the package.json file, npm install is succesfull - but of course the project doesn't work then.
I am using Node 12.8.0. And here are the package.json file:
{
"name": "test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "24.0.17",
"#types/node": "12.7.1",
"#types/react": "16.9.1",
"#types/react-dom": "16.8.5",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1",
"typescript": "3.5.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 dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I solved this by running
npm cache clean --force
But if you want to check if it is a viable solution before nuking the entire cache you can do:
npm install --cache /tmp/empty-cache
It forces npm to not use the cache.
I clone your package.json and npm install work good
using node v11.14.0 and npm 6.7.0
I tried to clear this problem to use on the node v12.8.1.
But I could't solve it.
Finally, I down-graded node version to 10.16.3 LTS. :(
If you want to use 'create-react-app' that have no npm error, Just use node version 10.16.3 LTS.

Building a dev version of a react application, continuously, for development

I just created a react application by running:
create-react-app foo
which created a package.json file with:
{
"name": "foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3"
},
"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"
]
}
npm start and npm run build both run as intended, but this application is the frontend to a Django application, so, to have dev mimic production a bit better I don't want to serve the app with node.js. What I want to do is continuously build the assets, html, js, etc and let Django serve them like any other HTML/JS/CSS. I remember Webpack doing this last time I played with it a couple of years ago.
How do I do it in the context of this react application? In short, how do I make npm run build run continuously on file changes and generate dev assets.
You can install the watch package as a dev-dependency and add a script in your package.json that watch for changes in src folder and run npm run build:
npm install --save-dev watch
// package.json
"scripts": {
"watch": "watch 'npm run build' src/"
}
Then, while you work, keep open a tab with:
npm run watch
Consider, though, that the build could be a long process. It depends on the size of your application.

Resources