React项目npm start编译成功但localhost:3000持续加载无法访问

核心诱因是依赖版本不兼容：

• 你的package.json中react版本为^18.1.0，但react-dom版本停留在^17.0.2，两个核心渲染依赖大版本不一致
• 项目使用的react-scripts@4.0.3没有适配React 18的渲染逻辑，这类错配不会在编译阶段抛错，终端会显示编译成功，但浏览器端会卡在资源挂载阶段，既不渲染内容，也不会在控制台输出明确报错。

按以下步骤操作即可修复：

• 对齐核心依赖版本
  执行命令卸载冲突依赖，安装互相兼容的版本：

npm uninstall react react-dom react-scripts
npm install react@^18.2.0 react-dom@^18.2.0 react-scripts@5.0.1

• 修改入口文件渲染逻辑
  打开src/index.js，React 18废弃了旧的ReactDOM.renderAPI，需要替换为createRoot写法，参考如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

// 删除旧版本渲染代码
// ReactDOM.render(<App />, document.getElementById('root'))

// 替换为React 18兼容写法
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• 清理缓存重装依赖
  删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装全量依赖，之后运行npm start即可正常访问页面。

如果完成上述操作后问题依然存在，按以下顺序排查：

• 检查组件代码：是否存在useEffect漏写依赖数组导致的无限重渲染、路由配置中是否存在无限重定向规则，这类逻辑问题通常不会抛出明确报错，只会让页面持续处于加载状态
• 检查public/index.html：确认文件中存在<div id="root"></div>挂载节点，节点缺失时旧版构建工具不会抛出明确错误，只会出现白屏加载现象
• 关闭浏览器脚本拦截、广告拦截类插件：这类插件可能阻断webpack dev server的热更新websocket连接，导致页面一直等待资源加载无法完成渲染

内容的提问来源于stack exchange，提问作者Joshua Cushing