I just created React App by "npx create-react-app", and then when I do "npm install redux" or "npm install --save-dev redux" or "npm install --save redux" - it just does not modify the package.json
I tried the same thing with "react-redux", "react-thunk"... And still... The package.json remains the same.
I do not know how to fix this.
Please, help.
"name": "basic_redux_setup",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.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"
]
}
}
Make sure you are on the right directory while executing the NPM scripts, which must be the same directory where the package.json file is located.
Related
This is my first react app and I am trying to deploy it. When i use npm run build command, it produces all the folders in /build except index.html.
As a result, browser only renders file path on my localhost port.
P.S: I tried my best to find the solution to this issue, ut I couldn't and there is one very close which is related to VUEjs not reactjs
I do use create-react-app
Package.json file
{
"name": "react-task-tracker",
"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-icons": "^4.6.0",
"react-scripts": "5.0.1",
"serve": "^14.1.1",
"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"
],
"homepage": "."
}
}
React is installed properly and everything else works, except when I try to run "npm start" in the terminal, it gives me the following error.
Here's my package.json code:
{
"name": "r3-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.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"
]
}
}
Do not use & when naming the directory on Windows. Rename UI & Web Design into UI_Web_Design. Anything after the & is treated as a command.
After changing the name of the directory run npm start.
I have been trying to install React on my pc using both the methods npx and npm but even then my terminal (VSCode) is throwing this error. I am unable to start my custom react app.
I have checked other responses but I was not satisfied.
My current node version is 12.16.2
My current npm version is 6.14.8
My package.json file is :
"name": "myapp",
"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"
]
}
}
I have been stuck for hours now. Any help is very much appreciated.
I am learning React using create-react-app, and I'm getting this error in my app:
TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef() is not a function
Now, I know that this feature was only introduced in React 16.3, but that seems to be the version I have installed. I initialized everything by typing:
npx create-react-app probando02
If I check my version:
npm view react version
16.13.1
And my package.json file is:
{
"name": "probando02",
"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.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"
]
}
}
EDIT: my React environment, as shown by npx create-react-app --info:
Environment Info:
current version of create-react-app: 3.4.1
running from C:\Users\paulo\AppData\Roaming\npm-cache\_npx\21716\node_modules\create-react-app
System:
OS: Windows 10 10.0.18362
CPU: (24) x64 AMD Ryzen Threadripper 1920X 12-Core Processor
Binaries:
Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
Internet Explorer: 11.0.18362.1
npmPackages:
react: ^16.13.1 => 16.13.1
react-dom: ^16.13.1 => 16.13.1
react-scripts: 3.4.1 => 3.4.1
npmGlobalPackages:
create-react-app: Not Found
So what's going on?
I am using the same version but it works fine for me.
And also here is my package.json file
{
"name": "example",
"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.13.1",
"react-dom": "^16.13.1",
"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"
]
}
}
It worked fine for me it was launching the default website in port 3000.
I think its just a update issue or so, just try updating npm.
I wanna show page on using 'react-router-dom' in react.
And show error
[react-router-dom#5.2.0 requires a peer of react#>=15 but none is
installed. You must install peer dependencies yourself.].
But my react version is "^16.13.1" already.
package.json
{
"name": "pra_hook",
"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.13.1",
"react-dom": "^16.13.1",
"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"
]
}
}
I got the same issue. But it got resolved when I use the below command:
npm install react-router-dom
Instead of
npm install -g react-router-dom.
Do [npm install react-router-dom] and work