Question

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

Answer 1

确保您在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 2

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

上面提到的方法我都试过了。但它对我不起作用。

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

我的 React 版本是 17.0.1。

Answer 3

检查此拖车点

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

然后它也没有运行，请尝试第二个命令

删除节点模块，然后再次运行npm install。

如果以上两点均无效，请提供屏幕截图以进行进一步分析。

Answer 4

我也有类似的事情发生。

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

我在Windows 10上有一个8GB的Ram，并且第一次使用默认的“ npm start”时，我发现节点进程会占用大量内存-因此，我尝试同时提供更多内存我累了要更改端口反应用途。

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

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

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

就我而言-我猜您是第一次在React Typescript项目上运行“ npm start”，它可能会为文件建立索引（或执行类似操作-我不确定并且可能需要阅读它-我是是Typescript的新功能），占用大量内存。

以您为例-可能类似

希望它会有所帮助：）

Answer 5

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

npm 安装
npm 运行构建
npm 启动

似乎不是版本问题。

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

useEffect()

这个钩子用错了，可能是我忘记完成了；然后我修复了它，然后 npm run start，它起作用了，服务器成功启动。

Answer 6

最后解决了这个问题。对我来说，问题出在我的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 7

我相信您可能会遇到Node和npm的问题。我建议您先检查版本-您需要在计算机上安装Node> = 8.10和npm> = 5.6，并根据需要进行更新。值得尝试重新安装节点。

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

Answer 8

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

npm install react-scripts@2.1.8

希望这会有所帮助！

Answer 9

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

npm build 然后 npm start

我在Mac上运行React，必须先允许终端与chrome交互，然后才能运行。

Answer 10

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

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

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

很奇怪。

Answer 11

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

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

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

Answer 13

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

Answer 14

这是我的反应版本： “反应”：“^ 17.0.2”， "react-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）后，一切正常。

React应用停留在“启动开发服务器”上

16 个答案: