React 踩坑现场,巨坑

最新推荐文章于 2024-06-19 17:10:03 发布

编程小黑马

最新推荐文章于 2024-06-19 17:10:03 发布

阅读量242

点赞数

文章标签： react web 大前端

本文链接：https://blog.csdn.net/qq_37430469/article/details/116448958

版权

本文介绍了在使用react-app-rewired启动React应用时遇到的报错，包括npm版本过低、react-scripts版本问题等，并提供了详细的解决步骤，如升级npm，更新react-scripts到稳定版本，删除并重新安装node_modules。此外，还展示了更新后的package.json配置文件。

摘要由CSDN通过智能技术生成

package.js 里面的配置

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

上面我采用的是react-app-rewired start 配置,
如果启动大部分还有下面的报错,
react-app-rewired start

报错一般有如下几种情况,一一对比
1,windows电脑的用户打开命令 cmd 查看npm node -version 版本,如果版本太低太旧了可能会报错,官网下载最新稳定node配置

2,在package.js里面查看"react-scripts": “^3.4.0”, 的版本,现在我的这个版本是稳定的,之前报错的版本是
“react-scripts”: “^3.3.1”,这个低版本,配置出错,很多都会报错,把这个版本升级,然后删除项目根目录的node_modules删除,在npm install --save 全局安装下依赖,在npm start 启动成功就ok了,

这是我更新过后的

{
  "name": "react-admin",
  "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",
    "antd": "^3.26.4",
    "axios": "^0.19.0",
    "babel-plugin-import": "^1.13.0",
    "customize-cra": "^0.9.1",
    "draft-js": "^0.11.4",
    "draftjs-to-html": "^0.9.1",
    "echarts": "^4.6.0",
    "echarts-for-react": "^2.0.15-beta.1",
    "html-to-draftjs": "^1.5.0",
    "jsonp": "^0.2.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "react": "^16.12.0",
    "react-app-rewired": "^2.1.5",
    "react-dom": "^16.12.0",
    "react-draft-wysiwyg": "^1.14.4",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.0",
    "redux": "^4.0.5",
    "store": "^2.0.12",
    "wangeditor": "^3.1.1",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired 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"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.7.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.5"
  },
  "proxy": "http://localhost:5000"
}

真的是巨坑!!!