[英]create-react-app dependency version issues with React 18
npx create-react-app my-project
results in the following dependency errors: npx create-react-app my-project
导致以下依赖性错误:
npx version: 8.5.0 npx 版本:8.5.0
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-18@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"<18.0.0" from @testing-library/react@12.1.5
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^12.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
The command still produces a project directory, but running npm start
in the created directory errors with web-vitals
missing from node-modules
.该命令仍会生成一个项目目录,但在创建的目录中运行
npm start
会出错,并且node-modules
中缺少web-vitals
vitals。
Running the same command with --force
or --legacy-peer-deps
as suggested by the above error message doesn't solve the problem.按照上述错误消息的建议,使用
--force
或--legacy-peer-deps
运行相同的命令并不能解决问题。
Deleting node_modules
and package-lock.json
and running npm i
also doesn't solve the problem.删除
node_modules
和package-lock.json
并运行npm i
也没有解决问题。
The problem has been fixed with the latest update of create-react-app
.该问题已通过
create-react-app
的最新更新得到解决。 Now it creates a project without any problem.现在它创建一个项目没有任何问题。
Until this is fixed for now you can delete the node_modules
folder and package-lock.json
.在暂时解决此问题之前,您可以删除
node_modules
文件夹和package-lock.json
。 Next, open package.json
and change接下来,打开
package.json
并更改"react": "^18.0.0"
& "react-dom": "^18.0.0"
to an earlier version eg: "react": "^18.0.0"
& "react-dom": "^18.0.0"
到早期版本,例如:
"react": "^17.0.2"
& "react-dom": "^17.0.2"
. "react": "^17.0.2"
& "react-dom": "^17.0.2"
。
Finally, you can run npm install
.最后,您可以运行
npm install
。
Alternative Solution (Try this first:):替代解决方案(先试试这个:):
solution suggested by joooni1998 ): joooni1998建议的解决方案:
node_modules
and package-lock.json
node_modules
和package-lock.json
npm i web-vitals --save-dev
npm i web-vitals --save-dev
npm install
npm install
and then you can use npm run build
and npm start
again然后你可以使用
npm run build
和npm start
again
Check here for the Github issue .在此处查看 Github 问题。
Here is a temporary workaround:这是一个临时解决方法:
Install cra-template to a separate folder (other than your new project app's folder) using "npm install cra-template"使用“npm install cra-template”将 cra-template 安装到单独的文件夹(新项目应用程序的文件夹除外)
Go to the installed cra-template package folder and in file "template.json" change the line '"@testing-library/react": "^12.0.0"' to '"@testing-library/react": "^13.0.0"' Go 到已安装的 cra-template package 文件夹,并在文件“template.json”中将行“@testing-library/react”:“^12.0.0”'更改为“@testing-library/react”:“^ 13.0.0"'
Go back to your root folder and run npx create-react-app my-app (your app name) --template file:PATH_TO_YOUR_CUSTOM_TEMPLATE Go 回到你的根文件夹并运行 npx create-react-app my-app (你的应用程序名称) --template file:PATH_TO_YOUR_CUSTOM_TEMPLATE
Additionally, you can let the build fail, remove the node_modules folder as well as the package-json.lock file.此外,您可以让构建失败,删除 node_modules 文件夹以及 package-json.lock 文件。 Open the package.json file and change the react and react-dom to an earlier version.
打开 package.json 文件并将 react 和 react-dom 更改为更早的版本。
For example:例如:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
},
"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"
]
}
}
Delete reportWebVitals.js Remove import reportWebVitals from './reportWebVitals';
删除 reportWebVitals.js Remove
import reportWebVitals from './reportWebVitals';
from index.js Remove reportWebVitals();
从 index.js 中删除
reportWebVitals();
from the bottom of index.js从 index.js 的底部
Finally run npm install最后运行 npm 安装
It worked for me by deleting both 'node_modules' folder and 'package-lock.json' file.它通过删除“node_modules”文件夹和“package-lock.json”文件对我有用。 Then, I changed both react and react-dom version to 17.0.2 instead of 18.0.0 inside the package.json file as suggested by Gavriel's answer https://stackoverflow.com/a/71836018/12490294 .
然后,按照 Gavriel 的回答https://stackoverflow.com/a/71836018/12490294的建议,我将 package.json 文件中的 react 和 react-dom 版本都更改为 17.0.2 而不是 18.0.0。 Then, inside the app folder, I ran
然后,在应用程序文件夹中,我跑了
npm i web-vitals --save-dev
Then然后
npm start
The app started successfully应用启动成功
Or you can try this npx --legacy-peer-deps create-react-app my-appname
or goto index.js and remove the usage of web vitals或者你可以试试这个
npx --legacy-peer-deps create-react-app my-appname
或 goto index.js 并删除 web vitals 的使用
or downgrade npm with npm install -g npm@8.3.0
and create react app.或使用
npm install -g npm@8.3.0
降级 npm 并创建 React 应用程序。
You could use yarn add create-react-app your-app
instead您可以改用
yarn add create-react-app your-app
Try running either with --force or with --legacy-peer-deps, both will install dependencies without problems.尝试使用 --force 或 --legacy-peer-deps 运行,两者都会毫无问题地安装依赖项。
If that doesn't work, then delete the node modules folder and start installing from scratch如果这不起作用,则删除节点模块文件夹并从头开始安装
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.