React项目部署至FTP服务器出现Minified React error #299问题求助

常见原因及修复方案 #

1. 检查HTML文件中是否存在id="root"的元素 #

确保项目入口HTML文件（通常是public/index.html）里存在带id="root"的容器节点，示例代码：

<div id="root"></div>

如果该节点不存在则直接添加；如果id拼写错误（比如写成Root或root-box），修正为root即可。

2. 确保JS代码在DOM加载完成后执行 #

若React初始化代码在DOM元素渲染前就运行，会导致找不到目标容器，可通过两种方式修复：

• 方式一：调整script标签位置
  将引入React入口文件的<script>标签放在</body>标签之前，保证DOM优先加载：

<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>

• 方式二：用DOM加载事件包裹初始化代码
  在index.js中使用DOMContentLoaded事件包裹React初始化逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
});

3. 验证FTP上传的文件完整性 #

确认上传至FTP服务器的文件包含完整的build（或dist）目录，尤其是index.html文件没有遗漏或损坏。可重新上传整个构建产物目录，确保所有静态文件传输完整。

4. 排查路由/SSR配置问题（复杂应用场景） #

如果应用使用服务端渲染（SSR）或前端路由，需确认服务器配置正确，所有路由请求都返回包含root元素的HTML文件，而非404错误页面。

内容的提问来源于stack exchange，提问作者Thanos Rom