react项目中遇到的问题及解决方法记录(npm)

1.npm安装包出现以下错误

• npm ERR! code ERESOLVE
• npm ERR! ERESOLVE unable to resolve dependency tree
• npm ERR!
• npm ERR! While resolving: gzhipin-client@0.1.0
• npm ERR! Found: react-scripts@1.1.4
• npm ERR! node_modules/react-scripts
• npm ERR! dev react-scripts@“1.1.4” from the root project
• npm ERR!
• npm ERR! Could not resolve dependency:
• npm ERR! peer react-scripts@">=2.1.3" from react-app-rewired@2.1.8
• npm ERR! node_modules/react-app-rewired
• npm ERR! dev react-app-rewired@"*" 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.
• npm ERR!
• npm ERR! See C:\Users\58446\AppData\Local\npm-cache\eresolve-report.txt for a full report.
• npm ERR! A complete log of this run can be found in:
• npm ERR! C:\Users\58446\AppData\Local\npm-cache_logs\2021-07-31T08_21_58_583Z-debug.log

！！！解决方法：

1. npm7.x的版本比npm6.x更严格，因此降版本成6.xxx版本
   npm install npm@6.x -g
2. npm i --legacy-peer-deps

2.npm start出现以下错误

• npm ERR! code ELIFECYCLE
• npm ERR! errno 1
• npm ERR! gzhipin-client@0.1.0 start: react-app-rewired start
• npm ERR! Exit status 1
• npm ERR!
• npm ERR! Failed at the gzhipin-client@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:
• npm ERR! C:\Users\58446\AppData\Roaming\npm-cache_logs\2021-07-31T08_49_03_026Z-debug.log
• Error: The “injectBabelPlugin” helper has been deprecated as of v2.0. You can use customize-cra
  plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins

！！！解决方法：

reason:react-scripts升级到2.1.2 以后破坏了 react-app-rewired。然后 react-app-rewired升级到 2.x以后直接干掉了所有 helpers。

slove:把react-app-rewired 进行降级后可以了， 可以通过 npm install react-app-rewired@2.0.2-next.0 命令进行降级。 在安装低版本的react-app-rewired以后，重新npm install，最后再npm start启动项目就可以解决问题了。

3.npm运行时出错

！！！解决方法:

reason:这个实际上就是 less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理

solve:通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后 通过 npm install less-loader@5.0.0 命令下载降级版本的 less-loader，这个问题就可以解决了

4.连接MongoDB出错

Connection error!

failed to connect to server [localhost:27017] on first connect [[i [MongoError]: Authentication failed. at e.exports.h (c:\Users\58446.vscode\extensions\cweijan.vscode-mysql-client2-3.9.8\out\extension.js:63:9433) at e.exports.emit (events.js:315:20) at x (c:\Users\58446.vscode\extensions\cweijan.vscode-mysql-client2-3.9.8\out\extension.js:63:3124) at Socket. (c:\Users\58446.vscode\extensions\cweijan.vscode-mysql-client2-3.9.8\out\extension.js:63:6880) at Socket.emit (events.js:315:20) at addChunk (internal/streams/readable.js:309:12) at readableAddChunk (internal/streams/readable.js:284:9) at Socket.Readable.push (internal/streams/readable.js:223:10) at TCP.onStreamRead (internal/stream_base_commons.js:188:23)] { ok: 0, code: 18, codeName: ‘AuthenticationFailed’ }]

！！！解决方法：

reason：

1. 未安装MongoDB

2. 已安装MongoDB，但未启动服务

solve：

启动MongoDB服务。

步骤如下：

1. 以管理员权限打开cmd，到MongoDB安装目录的bin下（注意：路径中最好不要有中文！！！）

 cd D:\awebstudy\allCode\mongodb\mongodb-win32-x86_64-windows-5.0.1\bin

2. 输入以下指令，且路径根据自己的进行修改

 mongod --dbpath"D:\awebstudy\allCode\mongodb\mongodb-win32-x86_64-windows-5.0.1\data\db"--logpath"D:\awebstudy\allCode\mongodb\mongodb-win32-x86_64-windows-5.0.1\data\log\mongod.log"--install --serviceName "MongoDB"

1. 输入mongo，显示如下：

最终连接成功！！！

5. 引入socket.io的错误

！！！解决方法：

网上说需要重启服务，npm start ，但无效。
然后在前后端都安装了一下错误提示里的socket.io-client，成功了！

结果又出现了跨域错误

因为配置过代理proxy，所以上网搜了好久不清楚到底出了什么问题

"proxy": "http://localhost:4000"

最后修改如下才成功解决了跨域问题

//const io = require('socket.io')(server) 
const io = require('socket.io')(server,{cors:true}) 

6. 安装rc-queue-anim后使用过程中报错

通过 npm install --save rc-queue-anim 安装了这个包但依旧报错，卸载再安装依旧报错，且安装与不安装的时候报的都是同样的错误。
查看package.json是有这个依赖包的

推测是版本过高的原因，于是npm install --save rc-queue-anim@1.x.0

然而，依旧报错。

！！！解决方法：

血的教训！！！千万不要写错了！！！

//import QueueAnim from 'rc-quene-anim'
import QueueAnim from 'rc-queue-anim'