反应应用程序卡在"Starting the development server"

Question

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

Answer 1

我也有类似的事情发生在我身上。

我有一个 react 项目，我想转换为 Typescript，正如您指出的那样，我从"create-react-app"开始，添加了我的所有文件并希望得到最好的 - 但像您一样卡在"启动开发服务器"消息上。

我有一个装有 Windows 8 的 10GB RAM，一旦我第一次使用默认的"npm start"，我就看到节点进程使用了大量内存 - 所以我试图给它更多，同时我厌倦了更改端口反应使用。

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

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

2. 关闭了我所有的chrome浏览器(它们占用了几乎很多内存)

3. 并给了它大约 1 分钟的运行时间

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

就我而言 - 我想你第一次在 React Typescript 项目上运行"npm start"时，它可能会索引文件(或做类似的事情 - 我不确定，可能需要阅读它 - 我是打字稿的新手)这占用了大量内存。

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

希望对:)有所帮助

Answer 2

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

Answer 3

检查这两点

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

那么如果它仍然没有运行，请尝试第二个命令

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

如果这两点不起作用，请提供屏幕截图以供进一步分析。

Answer 4

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

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

然后我不小心发现你是否有未使用的import或任何未使用的语句。你会卡住。

我的反应版本是17.0.1.

Answer 5

FWIW，我重新启动了我的 macbook，什么也没做，一切又恢复🤦 ♂️🤣了

Answer 6

确保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

希望对你有用。

Answer 7

我遇到的问题相同;npm start，但像您一样卡在"启动开发服务器"消息中。 在我尝试以下方法但没有奏效之后：

1. npm 安装
2. npm 运行构建
3. npm 启动

似乎版本无关紧要。

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

useEffect()

这是钩子使用不正确，也许我忘了完成它;然后我修复了它，npm 运行启动，它工作了，服务器成功启动。

Answer 8

终于解决了这个问题。对我来说，问题出在我的 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')
},

Answer 9

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

npm build然后npm start

我正在Mac上运行反应，并且必须允许终端在工作之前与chrome进行交互。

Answer 10

这是我的反应版本： "反应"： "^17.0.2"， "react-dom"： "^17.0.2"， "反应脚本"： "4.0.3"，

我的节点版本是 12.18.1，它不起作用。 我尝试将版本更改为 14.15.0，然后运行成功。

Answer 11

对我来说，问题是父目录的名称。由于某种原因，当我尝试安装到名为"#TEMP"的目录中时，它被"#"阻塞了。已成功切换到另一个目录。

这以前适用于我的旧 MBP i9，我现在使用的是 MBP M1 Monterey 12.2.1。

Answer 12

运行 lint 也可以给你提示(通常是由 html 标签未关闭等引起的)：

npm run lint

Answer 13

如果你在App.js中有useEffect，试着删除一次，它对我有用。

Answer 14

我相信你可能对Node和npm有一些问题。 我建议先检查版本 - 您需要在计算机上安装 Node>= 8.10 和 npm>= 5.6，并在需要时进行更新。尝试重新安装节点可能值得。

检查节点日志可以提供有关您的问题的一些线索(有关如何在此处记录的更多信息)

Answer 15

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

npm install react-scripts@2.1.8

希望这有帮助！

Answer 16

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

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

出于某种原因，创建反应应用程序对我来说阻塞了 CSS 文件。

奇怪。

Answer 17

我的团队也面临着同样的问题，但我们设法解决了它。

• 运行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"
}

确保后，您可以按照上面给出的步骤进行操作。

Answer 18

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

Answer 19

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

Answer 20

以下是检查的牵引点：

1. 删除package.lock并node_modules，重新安装：npm i。
2. 检查节点版本。也许您当前使用的版本是12.0.0，但该项目限制为14.0.0。

Answer 21

我也有类似的问题。我刚刚打开了 chrome 以检查它是否真的在那里运行(chrome 是我的默认 vs 代码浏览器)，然后 npm 可以在此之后运行下一步。因此，如果您卡在"开始开发...">

Answer 22

此错误可能由于多种原因而发生，我的特定情况(如附图所示)在安装splide和样式组件时突然发生，可能是由于某些漏洞 我的错误已通过运行得到解决npm audit fix --force