I have just discovered React. I would like to install the latest stable version of React (17.0.2), but I can't create a new project based on React 17.
Can you help me?
$] npm --version
8.5.5
$] node --version
v16.15.0
I tried version 18, but many dependencies that I want to use are not up to date for version 18.
I did the following:
$] npx create-react-app sample-11
$] cd sample-11
$] cat package.json
{
"name": "sample-11",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.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"
]
}
}
Then I updated the package.json by replacing 18.1.0 to 17.0.2.
I update this lines:
"react": "^17.0.2"
"react-dom": "^17.0.2"
rm -rf node_modules
rm package-lock.json
npm install
I get the error:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^18.0.0" from #testing-library/react#13.2.0
So, I update the package.json by removing "#testing-library/react"
npm install
Ok.
npm start
Compiled with problems:
ERROR in ./src/index.js 5:0-40
Module not found: Error: Can't resolve 'react-dom/client' in '/home/dev/Projets/node-projects/sample-11/src'
After making a new project, in package.json we update this line
"react": "^17.0.2"
"react-dom": "^17.0.2"
then delete package-lock.json and node_modules and then apply
npm install
try like this
"#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-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
Related
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.
I tried to create a react app and add typescript to it.
But when I run the app, it seems like npm start is not detecting the typescript file and not generating tsconfig.json automatically.
Here is what I did:
1. npx create-react-app my-app
2. cd my-app
3. npm install --save typescript #types/node #types/react #types/react-dom #types/jest
4. rename index and app to tsx file
4. npm start
The error I got:
Module not found: Error: Can't resolve './App' in
'C:\WebDev\threeJs\01-tutorial\src'
I assume it is because it's looking for App.jsx not App.tsx. But I'm not sure what is the reason for that.
Here is some warning I got when npm start:
DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option...
My npm version: 6.14.15
Here is my package.json file:
{
"name": "01-tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.0",
"#types/node": "^17.0.17",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"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"
]
}
}
I had the same error, I was in the root folder but my package.json file was a step ahead. I cd into the folder where my package.json file was and it worked for me.
It all began after installing locomotive-scroll. I have been trying to install node-sass in my react app. I tried npm install node-sass but I got an error ERR_SOCKET_TIMEOUT I can't even run npm start command, it gives these errors
./node_modules/locomotive-scroll/src/locomotive-scroll.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./node_modules/locomotive-scroll/src/locomotive-scroll.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
Require stack:
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\sass-loader\dist\getDefaultSassImplementation.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\sass-loader\dist\getSassImplementation.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\sass-loader\dist\index.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\sass-loader\dist\cjs.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\webpack\lib\NormalModule.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\webpack\lib\Compiler.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\webpack\lib\webpack.js
- C:\Users\Noname\Desktop\react js\vertical-portfolio\react-app\node_modules\react-scripts\scripts\start.js
I tried npm cache clean, npm audit fix, then tried with --force both of them. Deleted node_modules, run npm install, updated all packages with ncu -u. I tried npm clean cache, but it didn't work too.
Here is my package.json
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.4.2",
"emailjs-com": "^3.2.0",
"framer-motion": "^4.1.17",
"gsap": "^3.8.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-gsap": "^3.2.1",
"react-icons": "^4.3.1",
"react-loading": "^2.0.3",
"react-locomotive-scroll": "^0.2.0",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"react-scroll": "^1.8.4",
"styled-components": "^5.3.1",
"use-in-view": "^1.0.15",
"web-vitals": "^2.1.2"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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": {
"gh-pages": "^3.2.3"
}
}
So, node-sass is deprecated.
I'd like to think replacing node-sass with sass will solve your issue.
You should replace it by doing:
npm rm node-sass
npm i sass
If the project still throws errors, or demands/requires you install node-sass during runtime, try creating an alias in package.json that points to sass to bypass that error:
"node-sass": "npm:sass#^1.54.4"
{
"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!
I have created a new organisation on npm and I am trying to publish my react component as a scoped package so that my team can use the same component in-house in all other apps.
On running npm publish command I am getting the following
npm ERR! code EPRIVATE
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
npm ERR! A complete log of this run can be found in:
my package.json looks like this
{
"name": "my-package-name",
"version": "1.0.0",
"private": true,
"main": "dist/AllExports.js",
"module": "dist/AllExports.js",
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.4.0",
"axios": "^0.21.0",
"package1217721": "^1.2.7",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.13.0",
"react-redux": "^7.2.2",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "set NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components --out-dir dist",
"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"
]
},
"proxy": "http://localhost:5000",
"devDependencies": {
"#babel/cli": "^7.12.10",
"#babel/preset-react": "^7.12.10"
}
}
And .babelrc file looks like this
//.babelrc
{
"presets": [
"#babel/preset-react"
]
}
And .npmrc looks like this
registry=http://registry.npmjs.org/
scope=myscopename
#myscopename:registry=http://registry.npmjs.org
And I have also tried
login out and then login in again.
uninstalled node_modules and then re-installed them.
did npm update
cleared npm cache as well
I have solved the issue. I was trying to use .npmrc to set scope but that was not working the way I wanted it to work.
But running the command "npm init --scope=your-scope" did the job. This command rebuilds the package.json file. I was not running the command at the first place because I was not sure if I need to run "npm init" if I already have a package.json in place. And I was afraid that it might reset the dependencies of my package but that is not the case. It keeps the dependencies intact.
Set private field (at 3rd line) in package.json file to false.