“启动开发服务器”时创建 React App 失败答案

【问题标题】：Create React App fails when "Starting the development server"“启动开发服务器”时创建 React App 失败
【发布时间】：2020-05-19 05:58:33
【问题描述】：

我的 react 应用程序是使用 create react app https://reactjs.org/docs/create-a-new-react-app.html 构建的，无法启动。

当我执行 npm run start 时，我的应用程序挂起并显示以下消息。

正在启动开发服务器...

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "^25.1.1",
    "@types/node": "^13.7.0",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "@types/react-router-dom": "^5.1.3",
    "axios": "^0.19.2",
    "lodash": "^4.17.15",
    "node-sass": "^4.13.1",
    "npm-check-updates": "^4.0.1",
    "qs": "^6.9.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "typescript": "^3.7.5"
  },
  "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 dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@semantic-release/gitlab": "^6.0.2",
    "semantic-release": "^17.0.2"
  },
  "release": {
    "branch": "master",
    "plugins": [
      "@semantic-release/commit-analyzer",
      "@semantic-release/release-notes-generator",
      [
        "@semantic-release/gitlab",
        {
          "gitlabUrl": "https://git.companyname.com"
        }
      ]
    ]
  }
}

节点版本：v12.14.1 npm 版本：6.13.4

我已经尝试了几次，每次失败都会创建一个新的节点进程，我知道这一点，因为它要求我选择不同的端口。

到目前为止，我已经尝试了以下过程，但没有任何运气

rm -rf node_modules
npm install
npm start

【问题讨论】：

你试过访问localhost:3000吗？
是的，我尝试访问 localhost:port (3000) 并且页面一直在不断加载
检查您的浏览器控制台
试试：npm install npm@latest -g
@demkovych 控制台中没有任何相关内容，页面未完成加载，所以我不确定您的期望

标签： reactjs create-react-app

【解决方案1】：

如果您在使用 creat-react-app 创建 React 应用程序后自己安装了一些软件包，可能是因为其中一个已安装的软件包无法正常工作。过去，我遇到过像你这样的问题。当时，我已经安装了 react-pdf 包来显示 pdf。结果，开发服务器没有启动，每当我再次运行时，它都会要求选择另一个端口。删除该软件包后，它运行良好。

所以我认为 package.json 中可能没有工作模块。在我看来，它可能是“qs”包装。

【讨论】：

我卸载了 qs 并 exec npm run start 但它不起作用
qs 依赖项是最新的并且安装良好（npm 6.13.7 和节点 v8/v12）恕我直言，这不太可能是问题。
我说可能是。当然那个包不能是'qs'。但我确信错误来自您安装的错误包。我想你很容易找到它。

【解决方案2】：

我复制了您的 package.json 文件并在我的机器上本地运行它。

首先我跑npm install

然后我创建了 /src/index.js 并从 create-react-app 中插入了以下默认代码：

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<div>We're in!</div>, document.getElementById("root"));

我还创建了/public/index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

最后，我跑了npm start

应用程序运行良好，唯一的问题是过时的子依赖项（corejs 的旧版本）

这让我认为问题可能出在您的本地设置中。

我建议您清除 npm 缓存并重试。

要清除缓存，请以提升的权限运行npm cache clear --f。

然后我的建议是启动一个新的应用程序目录，以防现有目录中有损坏。

【讨论】：

【解决方案3】：

对我来说，结果是重新启动我的计算机修复了它。

我仍然不知道这是什么原因，因为环境保持不变，除了删除 node_modules 和 npm install 我什么也没做。

【讨论】：

【解决方案4】：

我通过安装以前版本的 npm-scripts 来修复它试试这个：

npm install react-scripts@2.1.8

【讨论】：