npx create-react-app test somehow gives webpack error - reactjs

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

Related

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.

Error when installing react-router-dom npm install issue

I have node v12.16.2, and npm 7.16.0 running on Mac OS Big Sur 11.5.1.
I just installed a npx react project, with:
npx create-react-app frontend
and this is my package.json file:
{
"name": "frontend",
"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",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
When I try to add:
npm i react-router-dom
I get the following error:
npm WARN tarball tarball data for
hoist-non-react-statics#https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz
(sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==)
seems to be corrupted. Trying again. npm WARN tarball tarball data for
hoist-non-react-statics#https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz
(sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==)
seems to be corrupted. Trying again. npm ERR! code ENOENT npm ERR!
syscall lstat npm ERR! path
/Users/sven/.npm/_cacache/content-v2/sha512/fe/01/a2bf18bc24f296366fd6d234a6cdc30fa5fa4f2dcddd63fe86c615f6850f621a3dda0df925578113ecd8caa528a72e9279bda7daf62886204660d7449f07
npm ERR! errno -2 npm ERR! enoent ENOENT: no such file or directory,
lstat
'/Users/sven/.npm/_cacache/content-v2/sha512/fe/01/a2bf18bc24f296366fd6d234a6cdc30fa5fa4f2dcddd63fe86c615f6850f621a3dda0df925578113ecd8caa528a72e9279bda7daf62886204660d7449f07'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/sven/.npm/_logs/2021-08-02T09_21_43_877Z-debug.log
What could this issue be about: incompatible versions of node or npm for npx create react app?
npm cache clean
npm i react-router-dom --save
I don't know which directory you are running the second command from but you need to be in the project directory (same dir as package.json). cd frontend before the second command.

ReactJs error : npm start not working , I also tied " npm cache clean --force ". I am stuck in the middle of my project

This is the error :
my-app#0.1.0 start /home/gaurav/Desktop/Django + React/Saurav Hardware/saurav_hardware/my-app
react-scripts start
sh: 1: react-scripts: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! my-app#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the my-app#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /home/gaurav/.npm/_logs/2020-05-20T20_38_00_671Z-`enter code here`debug.log
[// This is my package.json]
{
"name": "my-app",
"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-icons": "^3.10.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.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"
]
}
}
This is happening everytime I try to start npm. It was working fine yesterday but it stopped totally.What should I do? What is missing in this package.json file? I also can't be able to install node modules.......!
You haven't installed all of your modules. Run npm install to install the modules specified in package.json and then npm start should work. Note from the error message that react-scripts is not found, which is your clue that the package is not installed

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

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"
]
}
}

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.

Resources