React应用程序卡在“启动开发服务器”上。

Question

我有一个使用create-react-app创建的React应用程序。运行npm start命令后（启动脚本在package.json中表示为"start": "react-scripts start"），控制台会像往常一样显示“Starting the development server”，并打开浏览器。但是在此之后，无论是控制台还是浏览器都没有任何输出或错误，也没有任何操作。

- kenneth-rebello

---

请分享错误截图。 - Ronak Khangaonkar

在几个疲惫不堪的小时尝试无果后，我决定重置整台电脑（因为它相对较新，所以并不麻烦）。即使卸载了Node并重新安装，问题仍未得到解决。在卸载后，端口3000和其他端口上运行的僵尸进程仍然存在，但在重新启动电脑后清除了。 - kenneth-rebello

你使用哪个操作系统和集成开发环境？ - Sharon Lifshits

重启电脑对我有用。 - Manikandan Kbk

“工作答案”就是“耐心等待”。有时候会发生这种情况。 - aderchox

Answer 1

我也遇到了类似的问题。

我有一个React项目，想要将其转换为TypeScript，就像你所说的那样，我使用了“create-react-app”，添加了所有文件，希望能一帆风顺地进行下去，但是却像你一样，在“Starting the development server”消息处卡住了。

我的电脑是Windows 10，内存为8GB，当我第一次使用默认的“npm start”时，发现node进程使用了很多内存。因此，我尝试增加内存，并同时尝试更改React使用的端口。

1. 在package.json中的start脚本中添加以下内容：

   "scripts": { "start": "PORT=3001 react-scripts --max_old_space_size=8128 start", ... }

2. 关闭了所有Chrome浏览器（它们占用了相当多的内存）

3. 等待了大约1分钟

大约1分钟后，它开始工作了，从那个时候起，它可以快速启动，不占用太多内存，并且不依赖于我选择的端口。

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

在你的情况下-可能也是类似的原因。

希望对你有所帮助:)

- Sharon Lifshits

---

关闭Chrome浏览器就是我所需要的。谢谢！ - Ian

Answer 2

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

- Richard Vartan Melkonian

---

是的，这也发生在我身上，我有一个已经存在的项目，几周没有碰它了。 - Chris Perry

在我执行了 npx update-browserslist-db@latest 之后，我也遇到了同样的问题。 - neolei

我们知道为什么第一次运行需要更长时间吗？是在建立索引文件还是下载某些内容？ - aarowman

我有一个问题，每次在我们的流水线上运行5分钟，我想知道是否是因为这个问题 - 每次都被视为第一次。我能保存/缓存其他文件以后加快速度吗？ - aarowman

Answer 3

请检查以下两点：

1. 在启动服务器之前，请运行npm install命令。

如果仍无法运行，请尝试第二个命令：

2. 删除node模块，然后再次运行npm install。

如果这两点都没有起作用，请提供截图以进行进一步分析。

- Jerrin stephen

---

我尝试了两种方法，但都失败了，所以来到这里:( 另一个需要注意的问题是，该软件包包含一些存在漏洞的依赖项。这可能是原因吗？ "npm install" 有时也会挂起，但尝试多次后最终会成功。通常挂起的点是 "sill install executeActions" 和 "postinstall: verb lock using <path to npm cache>"。 - kenneth-rebello

@kenneth-rebello 在运行 NPM start 命令时，请提供截图。如果您使用 create-react-app 创建应用程序，则通过此命令安装的软件包将没有任何漏洞。您尝试安装过任何软件包吗？ - Jerrin stephen

遇到了相同的问题，尝试在全新的克隆上操作，但仍然没有成功。 - Simon Long

我还注意到npm build也会挂起。这表明编译是问题所在。然而，我在控制台或npm日志中没有看到任何信息。在没有任何线索的情况下，不知道该从哪里入手。 - Simon Long

我尝试了你的方法多次，但都失败了。 - MsiLucifer

Answer 4

我也是用 create-react-app 创建的 React 应用。

我尝试了上面提到的所有方法，但都没有成功。

后来我偶然发现如果你有未使用的 import 或任何未使用的语句，你的应用会卡住。

我的 React 版本是 17.0.1。

- drlingyi

---

这是一个与react-scripts本身有关的问题，他们需要修复它。与eslint相关的一些内容。 - Fabio William Conceição

Answer 5

顺带一提，我重新启动了我的 MacBook，没有做任何更改，结果一切都正常了 ‍♂️

- chrismarx

---

有趣的是，“关闭然后重新打开”是解决这个问题的最佳方法 :-) - Devon

在Windows上做了同样的事情，重启后可以解决，但在iMac上无法修复((( - undefined

Answer 6

我遇到了与你相同的问题，运行npm start时卡在“Starting the development server”这条消息上。

尝试了以下方法但都没有起作用：

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

看起来版本不是问题所在。

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

useEffect()

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

- J锋_

---

你说得没错，但终端一直显示我们缺少依赖项，所以将其添加到[]中。但如果这样做，useEffect会被无限调用，有没有更好的方法？ - faijan memon

Answer 7

请确保你的 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

希望这对您有用。

- Muhammad Zeeshan

Answer 8

我遇到了同样的问题，

我必须先构建它

npm build 然后 npm start

我在我的 Mac 上运行 React，必须在它能够工作之前允许终端与 Chrome 交互。

- Bluephlame

Answer 9

这不是一个解决问题的答案，而是如何在所有情况下修复问题，因为我认为可能有多个因素影响了这个问题。

按照这里的票据 https://github.com/facebook/create-react-app/issues/12090，让我追踪到问题与捆绑包中块具有相同文件名有关。

- buggedcom

Answer 10

我在运行yarn install时遇到了超时问题，之后卡在了Starting development server...这个步骤上，而这在我的电脑上以前从未发生过。

可能是因为我不在美国，所以我将VPN设置为洛杉矶，并删除了yarn lock文件和node_modules目录，重新运行了yarn install和yarn start，一切都正常工作了！

- Ian