Symfony 7集成React组件仅显示Loading问题求助

以下是针对编译/控制台无报错但前端未渲染内容的核心排查点：

1. 确认React挂载逻辑（app.js） #

必须确保入口文件使用React 18+的createRoot API，且目标DOM选择器完全匹配模板中的节点：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Hello from './Hello';

// 注意id必须和twig模板中的节点id一致
const rootElement = document.getElementById('react-root');
if (!rootElement) {
  console.error('React root element not found');
  return;
}
const root = ReactDOM.createRoot(rootElement);
root.render(<Hello />);

坑点：如果仍使用旧版ReactDOM.render，React 18+会静默失败（无控制台报错），导致Loading文本无法被替换。

2. 验证Twig模板（index.html.twig） #

确保挂载节点存在，且正确引入Encore编译的资源：

{% extends 'base.html.twig' %}

{% block body %}
  <!-- 挂载节点必须存在，Loading文本放在节点内 -->
  <div id="react-root">Loading...</div>

  <!-- 必须用Encore的标签引入，避免路径错误 -->
  {{ encore_entry_script_tags('app') }}
{% endblock %}

排查：

• 检查DOM节点id的拼写/大小写（比如写成reactRoot而非react-root）
• 确认encore_entry_script_tags的参数是你在webpack配置中定义的入口名（默认是app）

3. 检查React组件（Hello.jsx） #

确保组件正确导出且无隐性语法问题：

import React from 'react';

// 必须是默认导出，或者在app.js中用命名导入
export default function Hello() {
  return <h1>Hello React!</h1>;
}

坑点：如果用命名导出（export function Hello()），但app.js中用import Hello from './Hello'，会导致组件为undefined，React静默渲染空内容。

4. 验证Webpack Encore配置（webpack.config.js） #

核心是启用React预设：

const Encore = require('@symfony/webpack-encore');

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './assets/app.js')
  .enableReactPreset() // 这行必须有，否则JSX无法转译
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
;

module.exports = Encore.getWebpackConfig();

排查：如果遗漏.enableReactPreset()，JSX会被当作普通JS解析，编译可能通过但浏览器无法执行。

5. 强制刷新缓存 #

缓存是最容易忽略的点：

• 执行php bin/console cache:clear清空Symfony模板缓存
• 执行npm run watch或npm run build重新编译前端资源
• 浏览器强制刷新（Ctrl+F5），或打开开发者工具禁用缓存后刷新

6. 检查版本兼容性 #

查看package.json中的依赖版本，确保React与Encore兼容：

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},
"devDependencies": {
  "@symfony/webpack-encore": "^4.0.0",
  "@babel/preset-react": "^7.22.0"
}

如果React版本过高但babel预设版本过低，可能导致转译不完整，静默失败。

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