React 应用程序卡在“正在启动开发服务器”答案

【问题标题】：React app stuck on "Starting the development server"React 应用程序卡在“正在启动开发服务器”
【发布时间】：2020-03-03 17:10:06
【问题描述】：

我有一个由 create-react-app 创建的 react 应用。运行 npm start 后（启动脚本在 package.json 中显示为“start”：“react-scripts start”），控制台显示像往常一样启动开发服务器并启动浏览器。但在此之后，控制台和浏览器都绝对不会无限期地执行任何操作。没有错误或输出。它什么都不做。

【问题讨论】：

奇怪。每次使用 create-react-app 创建新项目时都是这样吗？
你能分享一下终端的屏幕截图吗，检查是否有任何应用程序在端口 3000 中运行，可能是这个问题（猜猜！！），在终端中它会要求按是或否在另一个端口打开应用程序。
请分享错误截图
是的，每次我启动应用程序时，它都会在新端口上启动。发生这种情况是因为 Node 应用程序在我运行它的端口上运行。我使用 CTRL+C 停止应用程序，在终端中将其关闭，但任务管理器显示进程仍在运行。我尝试从任务管理器和终端使用 taskkill 杀死这些进程，但都失败了。后者给出错误提示“此进程没有正在运行的实例”。再次启动应用程序会提示我使用不同的端口（3000、3001、3002 等），我回答是，但我再次在“启动开发服务器”处停止
我会分享屏幕截图，但实际上没有什么可显示的。终端不会从“启动开发服务器”向后滚动，浏览器只会无限期地继续加载。

标签： reactjs npm create-react-app react-scripts

【解决方案1】：

这是我的情况。在我的反应应用项目中，我配置了 eslint

https://github.com/prettier/eslint-plugin-prettier

从源代码树中删除最小化的源文件（在我的例子中是 mapbox-gl.js）后，一切正常。

【讨论】：

【解决方案2】：

第一次运行命令时，页面加载大约需要 5 分钟。

【讨论】：

【解决方案3】：

这是我的反应版本： “反应”：“^17.0.2”， “反应域”：“^17.0.2”， “反应脚本”：“4.0.3”，

我的节点版本是 12.18.1，但它没有工作。我尝试将版本改为14.15.0，然后运行成功。

【讨论】：

请不要将此作为对他人问题的回答，而应作为您自己的问题。没有人可以在这里为您提供帮助。

【解决方案4】：

对我来说，是因为使用了StrictMode，服务器启动了，但应用却长时间加载。

【讨论】：

【解决方案5】：

和我遇到的同样的问题； npm start 但像你一样卡在“启动开发服务器”消息上。在我尝试了以下方法但没有成功之后：

npm 安装
npm 运行构建
npm 开始

似乎版本无关紧要。

最后，我重新检查了我的代码，发现导致开发服务器无法启动的错误：

useEffect()

这是钩子使用不正确，可能是我忘记完成了；然后我修复了它，然后 npm run start，它工作了，服务器启动成功。

【讨论】：

【解决方案6】：

我也通过 create-react-app 创建了我的 react 应用。

我已经尝试了上面提到的所有方法。但这对我不起作用。

然后我无意中发现你是否有未使用的import 或任何未使用的语句。你会卡住的。

我的反应版本是17.0.1。

【讨论】：

这是 react-scripts 本身的问题，他们需要修复它。与 eslint 相关的东西。

【解决方案7】：

我遇到了这个问题。就我而言，有一个 .eslintcache 文件中包含不正确的信息，并导致了问题。只需删除文件即可解决我的问题。

【讨论】：

【解决方案8】：

我的团队也遇到了同样的问题，但我们设法解决了。

运行npm install 更新软件包
然后运行npm audit fix 修复漏洞
最后关闭所有浏览器选项卡以释放 RAM。我已经看到节点进程占用大量内存。
运行npm start，开发服务器会在一两分钟内启动。

注意

确保package.json 中的依赖项包括以下内容：

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"

脚本是：

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

一旦你确定了，你就可以按照上面给出的步骤。

【讨论】：

【解决方案9】：

对我来说，问题在于我有 .css 文件。

我将我的 css 文件重命名为 .scss 并且它可以工作。

由于某种原因 create-react-app 对我来说 CSS 文件阻塞了。

很奇怪。

【讨论】：

【解决方案10】：

有同样的问题，我必须先构建它

npm build 然后 npm start

我在我的 Mac 上运行 react 并且必须允许终端在它工作之前与 chrome 交互。

【讨论】：

【解决方案11】：

我也遇到了同样的问题。尝试安装以前版本的 react-scripts。

npm install react-scripts@2.1.8

希望这会有所帮助！

【讨论】：

【解决方案12】：

我相信您在使用 Node 和 npm 时可能会遇到一些问题。我建议先检查版本——你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6，并在需要时进行更新。值得尝试重新安装节点。

查看节点日志可以为您的问题提供一些线索（有关如何记录here 的更多信息）

【讨论】：

【解决方案13】：

确保package.json 中的依赖项包括以下内容：

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"

脚本是：

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

确定后，您可以按照以下步骤操作：

1. npm install
2. npm run build
3. npm start

希望对你有用。

【讨论】：

【解决方案14】：

我也有类似的事情发生。

我有一个想要转换为 Typescript 的 React 项目，我按照您所说的“create-react-app”开始，添加了我所有的文件并希望获得最好的结果 - 但像您一样在“开始”中卡住了开发服务器”消息。

我有一个带有 Windows 10 的 8GB 内存，当我第一次使用默认的“npm start”时，我发现节点进程使用了大量内存 - 所以我尝试同时提供更多内存我厌倦了改变端口反应的用途。

将此添加到 package.json 中的启动脚本中：

"scripts": { "start": "PORT=3001 react-scripts --max_old_space_size=8128 start", ... }
关闭我所有的 chrome 浏览器（它们占用大量内存）
并给了它大约 1 分钟的运行时间

1 分钟后它开始工作，从那时起它开始快速启动并且不使用太多内存并且不依赖于我选择的端口

在我的情况下 - 我猜你第一次在 React Typescript 项目上运行“npm start”时它可能会索引文件（或做类似的事情 - 我不确定并且可能需要阅读它 - 我是typescript 的新手），这会占用大量内存。

在你的情况下 - 它可能是类似的东西

希望对你有帮助:)

【讨论】：

我只需要关闭 Chrome 浏览器。谢谢！

【解决方案15】：

终于解决了。对我来说，问题在于我的 webpack 配置。我在那里有一个 webpack 别名，其别名与我的 npm 包的名称相同。

即我的package.json 顶部有以下内容。

"name": "@mycompany/react-common-components"

在我的webpack.config.js 中我有

alias: {
        '@mycompany/react-common-components': path.resolve(__dirname, '../src/components')
      },

一旦我将 webpack 别名更改为以下，一切正常

alias: {
        'react-common-components': path.resolve(__dirname, '../src/components')
      },

【讨论】：

【解决方案16】：

检查这两个点

在启动服务器之前运行 npm install 命令。

那么它也没有运行，请尝试第二个命令

删除节点模块并再次运行 npm install。

如果这两点都不行，请提供截图做进一步分析。

【讨论】：

我尝试了这两种方法，但都失败了，这导致我来到这里 :( 需要注意的另一点是该软件包包含的依赖项很少有漏洞。这可能是原因吗？“npm install”也是有时会挂起，但在尝试多次后它最终会起作用。通常的挂起点是“sill install executeActions”和“postinstall：verb lock using ”
@kenneth-rebello 在您运行 NPM 开始评论时提供屏幕截图。如果您使用 create-react-app 创建应用程序，则通过此命令安装的软件包不会有任何漏洞。您是否尝试安装任何软件包？？
遇到同样的问题并在新的克隆上尝试了这个，但仍然没有运气。
我还注意到 npm build 也挂起。这表明编译是问题所在。但是，我在控制台或 npm 日志中什么也看不到。无事可做，不知道从这里到哪里去。
我尝试了你的方法几次，但都失败了。