Django项目无法渲染React.js，JS未执行及标签报错如何解决？

问题根因及修复步骤 #

• 第一，调整DOM与脚本的加载顺序，移除不必要的module标识
  你当前的index.html里，<script>标签写在<div id="root"></div>前面，JS执行时#root节点还不存在，React找不到挂载节点自然无法渲染。同时编译后的React产物是兼容普通JS的，无需加type="module"属性，修改body部分代码：

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- 把script标签挪到root节点后面，移除type="module" -->
    <script src="{% static 'index.js' %}"></script>
</body>

• 第二，避免加载未编译的React源码
  你当前配置的STATICFILES_DIRS包含了前端src、public目录，会导致Django直接返回未编译的包含JSX语法的源码，浏览器本身无法识别JSX，就会出现你提到的"拒绝识别React标签"的报错。正确操作流程如下：
  1. 进入前端项目目录，执行npm run build完成React代码编译，所有可执行的产物会自动输出到build目录
  2. 修改settings.py的STATICFILES_DIRS配置，只保留build目录即可：

  STATICFILES_DIRS = (
      FRONTEND_DIR / 'build',
  )
  

• 第三，补充静态资源访问规则
  开发环境下需要在Django主urls.py末尾添加静态资源匹配规则，确保静态资源可以正常加载：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

生产环境可直接用Nginx代理build目录下的静态资源，性能更高。

favicon引用与HTML服务方式说明 #

你当前用{% static %}模板标签引用favicon的方式是正确的，只要对应文件存在于build目录下即可正常加载。
如果不想直接静态提供HTML服务，可将编译后的index.html放到Django项目的templates目录下，通过Django视图渲染返回，示例代码如下：

1. 视图函数（views.py）：

from django.shortcuts import render

def serve_react(request):
    return render(request, "index.html")

2. 路由配置（urls.py）：

from django.urls import path
from .views import serve_react

urlpatterns = [
    # 你的其他接口路由放在前面
    path("", serve_react, name="react_app"),
    # 如需支持前端路由，可改为path("<path:path>", serve_react)
]

这种方式可以统一处理前端路由的刷新问题，避免直接访问子路径返回404。

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