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

15

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

— 肯尼斯·雷贝洛
source

奇怪。是每次使用create-react-app创建新项目时？

— Nikhil Goyal，

您可以共享终端的屏幕快照，检查端口3000中是否正在运行任何应用程序，可能是问题所在（猜测!!），在终端中，系统将要求按Yes或No打开应用程序在另一个港口。

— 迪利普·托马斯

请分享错误截图

— Ronak Khangaonkar '19

是的，每次我启动该应用程序时，它都会在一个新端口上启动。发生这种情况是因为Node应用程序重新运行了我在其上运行的端口。我使用CTRL + C停止了该应用程序，这在终端中将其关闭，但任务管理器显示进程仍在运行。我尝试使用taskkill从任务管理器和终端中终止这些进程，但是都失败了。后者给出错误消息“该进程没有正在运行的实例”。再次启动该应用程序会提示我使用其他端口（3000、3001、3002等。），我选择是响应，但再次停止“启动开发服务器”

— kenneth-rebello

我会分享屏幕截图，但实际上没有任何显示。终端将不会从“启动开发服务器”中向上滚动，浏览器只会无限期地加载。

— 肯尼思·雷贝洛

2

检查这两个点

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

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

卸下节点模块，然后再次运行npm install。

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

— 杰林·斯蒂芬（Jerrin Stephen）
source

我尝试了这两种方法，但都失败了，这导致了我:(要注意的另一点是，该软件包包含的几个依赖项都存在漏洞。这可能是原因吗？“ npm install”有时也会挂起，但是尝试了多次之后最终的悬挂点是“窗台安装executeActions”和“安装后：使用<npm缓存路径>的动词锁定”

— kenneth-rebello

@ kenneth-rebello在运行NPM开始注释时提供屏幕截图。如果使用create-react-app创建应用程序，则此命令安装的软件包将没有任何漏洞。您是否尝试安装任何软件包？

— 杰林·斯蒂芬，

有同样的问题，并尝试了一个新的克隆，仍然没有运气。

— 西蒙·朗

我还注意到npm build也挂起了。这表明编译是问题所在。但是，我在控制台或npm日志中什么也看不到。不知道该怎么做从这里去。

— 西蒙·朗

0

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

— 西蒙·朗
source

0

我也发生了类似的事情。

我有一个我想转换为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分钟的时间

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

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

您的情况-可能类似

希望能帮助到你：）

— 沙龙·利夫希茨（Sharon Lifshits）
source

0

确保您的依赖项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

希望会为您服务。

— 穆罕默德·泽山
source

0

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

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

— 丹·奥维迪乌（Dan Ovidiu Boncut）
source

0

我也有同样的问题。尝试安装早期版本的react-scripts。

npm install react-scripts@2.1.8

希望这可以帮助！

— 塔亚布·费罗兹（Tayyab Ferozi）
source

0

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

npm build 然后 npm start

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

— 蓝ph
source

0

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

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

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

奇怪的。

— 奥利弗·沃特金斯（Oliver Watkins）
source