问题描述

npx create-react-app my-app2 报依赖错
如下

Installing template dependencies using npm…
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app2@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error react@“^19.0.0” from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@“^18.0.0” from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error @testing-library/react@“^13.0.0” from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\Lenovo L340\AppData\Local\npm-cache_logs\2024-12-22T02_26_38_831Z-eresolve-report.txt

npm error A complete log of this run can be found in: C:\Users\Lenovo L340\AppData\Local\npm-cache_logs\2024-12-22T02_26_38_831Z-debug-0.log
npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

问题原因及解决办法

查看package.json ， 用的是最新的 19，可能是很多版本不兼容的问题

安装 18
cd my-app2
npm uninstall react react-dom
npm install react@18 react-dom@18

npm start，成功

有些此时npm start 还是会报错，
那就再执行下 上面的报错 ： npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0

使用 typscript模板会错

如上
npx create-react-app my-app3 --template typescript
除解决 react18问题外， 它还是报错
报错如下

Module not found: Error: Can’t resolve ‘./App’ in ‘D:\workspace\react-project\my-app3\src’
ERROR in ./src/index.tsx 7:0-24
Module not found: Error: Can’t resolve ‘./App’ in ‘D:\workspace\react-project\my-app3\src’

ERROR in ./src/index.tsx 8:0-48
Module not found: Error: Can’t resolve ‘./reportWebVitals’ in ‘D:\workspace\react-project\my-app3\src’

问题原因，

如果不接后缀， 默认是JSX, 或js的， 但这里使用了typescript 模板， 它们的名字都使用了 tsx ， ts 作后缀， 故识别不了
直接在对应报错模块中加上后缀名即可