Vite+React问题：使用ReactDOM.createRoot时出现'text/jsx' MIME类型错误

常见修复方案 #

• 检查入口文件扩展名
  确认React入口文件（如main.jsx）使用.jsx而非.js后缀。Vite默认仅对.jsx/.tsx文件编译JSX，用.js会导致JSX无法被正确处理，触发MIME类型错误。

• 验证Vite配置中的React插件
  打开vite.config.js，确保已正确引入并配置React插件：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
  })
  

  若插件被误删或配置错误，Vite无法编译JSX代码。

• 修正HTML中的脚本引入
  检查index.html里的入口脚本标签，不要设置type="text/jsx"，正确写法应为：

  <script type="module" src="/src/main.jsx"></script>
  

  Vite基于ES模块运行，type="module"是标准配置，错误的type属性会让浏览器无法解析代码。

• 清除缓存并重启服务
  缓存异常也可能导致问题，执行以下步骤：

  • 终止当前Vite服务（Ctrl+C）
  • 删除项目根目录下的node_modules/.vite文件夹
  • 重新执行npm run dev启动服务

• 更新依赖确保兼容性
  若依赖版本不兼容也会引发异常，运行命令更新相关包：

  npm update vite @vitejs/plugin-react react react-dom
  

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