React 应用卡在 "Starting the development server"

Question

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

Answer 1

检查这个牵引点

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

那也不是运行ning，请试试第二个命令

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

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

Answer 2

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

我也遇到了类似的事情。

我有一个 React 项目，我想将其转换为 Typescript，我按照你在 "create-react-app" 中提到的那样开始，添加了我所有的文件并希望一切顺利 - 但像你一样卡在“开始”开发服务器”消息。

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

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

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

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

就我而言——我想你第一次运行 "npm start" 在 React Typescript 项目上它可能会索引文件（或做类似的事情 - 我不确定但可能需要阅读它 - 我是 typescript 的新手）需要大量内存。

您的情况 - 可能与此类似

希望对您有所帮助:)

Answer 4

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

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

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

Answer 6

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

npm install react-scripts@2.1.8

希望对您有所帮助！

Answer 7

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

npm build 然后 npm start

我运行对我的 Mac 做出了反应，在它工作之前必须允许终端与 chrome 交互。

Answer 8

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

我将 css 文件重命名为 .scss 并且它有效。

出于某种原因，create-react-app 对我的 CSS 个文件造成阻塞。

奇怪。

Answer 9

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

运行 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 10

我运行进入这个问题。在我的例子中，有一个 .eslintcache 文件包含不正确的信息，并导致了问题。只需删除文件就可以解决问题。

Answer 11

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

以上方法我都试过了。但它对我不起作用。

然后我无意中发现你有没有用到import或者有没有用到的语句。你会卡住的。

我的反应版本是17.0.1。

Answer 12

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

npm 安装
npm 运行构建
npm 启动

看来版本问题不大

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

useEffect()

这个钩子用错了，可能是我忘记做完了；然后我修复了它，然后 npm 运行开始，它工作了，服务器成功启动。

Answer 13

对我来说，是因为使用StrictMode，服务器启动了，但是应用程序一直加载很长一段时间。

Answer 14

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

我的节点版本是12.18.1，没用。我尝试把版本改成14.15.0，然后运行成功

Answer 15

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

Answer 16

这是我的情况。在我的 React 应用程序项目中，我使用

配置了 eslint

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

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

Answer 17

这里检查了两个牵引点：

删除 package.lock 和 node_modules, re-install: npm i.
检查节点版本。可能你目前使用的版本是12.0.0，但是本项目限定14.0.0.

Answer 18

对我来说，问题是父目录的名称。出于某种原因，当我尝试安装到名为“#TEMP”的目录时，它被“#”卡住了。成功切换到另一个目录。

这之前在我的旧 MBP i9 上有效，我现在在 MBP M1 Monterey 12.2.1 上。

Answer 19

我有类似的问题。我刚刚打开 chrome 来检查它是否真的运行ning 在那里（chrome 是我的 vs code 的默认浏览器）然后 npm 可以运行下一步。因此，如果您卡在“正在启动开发...”，请尝试打开浏览器。

Answer 20

与其说这是一个解决问题的答案，不如说是解决所有情况下的问题，因为我认为可能有多种因素会影响这一点。

按照此处的票证 https://github.com/facebook/create-react-app/issues/12090 使我能够追踪到与具有相同文件名的捆绑包中的块有关的问题。

Answer 21

我在 yarn install 上遇到超时，然后在工作之后，卡在 Starting development server... 上，这在这台计算机上以前从未发生过。

可能是我不在美国，所以我把VPN设置到洛杉矶，删除了yarn lock文件和node_modules目录，re-ran yarn install 和运行 yarn start 一切正常！

Answer 22

这个错误可能是由于多种原因造成的，我的特殊情况（如附图所示）是在我安装 splide 时突然发生的，styled-components 可能是因为一些漏洞运行解决了我的错误 npm audit fix --force

React 应用卡在 "Starting the development server"

React app stuck on "Starting the development server"

npm

reactjs

react-scripts

create-react-app