React/Django应用加载模块脚本失败：MIME类型错误求助

问题核心 #

浏览器加载main.jsx时，服务器返回了application/octet-stream的MIME类型，不符合ES模块脚本要求的application/javascript类型，导致加载失败。

解决方案 #

1. 配置Django识别JSX文件的正确MIME类型 #

在项目的settings.py中添加MIME类型映射，让Django返回JSX文件时发送正确的响应头：

import mimetypes
mimetypes.add_type("application/javascript", ".jsx", True)

2. 检查静态文件配置与路径 #

• 确认main.jsx存放在Django的静态目录下（比如your_app/static/your_app/main.jsx），保证{% static 'main.jsx' %}能正确解析到文件路径。
• 检查settings.py中的静态文件配置是否正确：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

3. 修正react-django-templatetags的使用 #

若要使用该模板标签，需完成以下配置：

• 安装依赖：pip install react-django-templatetags
• 在settings.py的INSTALLED_APPS中添加应用：

INSTALLED_APPS = [
    # 其他已配置应用
    'react_django_templatetags',
]

• 模板中需加载react标签库并添加{% react_load %}，同时component参数无需加.jsx后缀：

{% load static %}
{% load react %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlogHost</title>
    {% react_load %}
  </head>
  <body>
    <div id="root"></div>
    {% react_render component='main' %}
  </body>
</html>

4. Vite开发环境临时适配 #

如果用Vite开发React，可让Django代理Vite的开发服务来规避MIME类型问题：

• 在settings.py中添加Vite的静态资源路径：

if DEBUG:
    STATICFILES_DIRS.append(BASE_DIR / 'frontend/node_modules')
    STATICFILES_DIRS.append(BASE_DIR / 'frontend/dist')

• 模板中直接引用Vite开发服务器的脚本地址：

<script type="module" src="http://localhost:5173/main.jsx"></script>

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