Express+Vite React项目加载报错：MIME类型不匹配求助

问题原因 #

你遇到的Failed to load module script: expected a javascript module script but server responded with a MIME type of text/jsx错误，本质是Express的静态文件中间件默认不识别.jsx文件的正确MIME类型，将其标记为text/jsx返回，但浏览器期望的是JavaScript模块类型（application/javascript）。另外，Vite React项目的.jsx源码需要编译才能被浏览器识别，直接加载源码文件夹的做法不符合Vite的工作流程。

解决方案 #

根据你的使用场景（开发/生产环境），选择对应的方案：

1. 生产环境（已打包前端） #

Vite项目在生产环境需要先编译打包，生成可直接被浏览器识别的静态文件，步骤如下：

• 进入前端项目目录，执行打包命令：

  npm run build
  

  执行完成后会生成dist文件夹，里面是编译好的前端资源。
• 修改Express代码中的静态文件路径和入口HTML路径，指向dist文件夹：

  // 替换原来的静态文件配置
  app.use(express.static(path.join(__dirname, "../frontend/dist")));
  app.get("*", (req, res) => {
      res.sendFile(path.resolve(__dirname, "../frontend/dist/index.html"));
  });
  

2. 开发环境（需要热更新） #

开发阶段推荐让Express代理Vite的开发服务器，这样既能保留Vite的热更新功能，又能统一请求域名，步骤如下：

• 安装代理中间件：

  npm install http-proxy-middleware --save-dev
  

• 在Express代码中添加代理配置，替换原来的静态文件和入口路由：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  // 代理所有前端请求到Vite开发服务器（默认端口5173，若修改过Vite端口请对应调整）
  app.use('/', createProxyMiddleware({
    target: 'http://localhost:5173',
    changeOrigin: true,
    ws: true, // 支持WebSocket，保证热更新正常工作
  }));
  

• 启动时先运行前端的Vite开发服务器（npm run dev），再启动Express后端。

临时测试方案（不推荐生产使用） #

如果只是临时测试，不想打包或代理，可以手动让Express为.jsx文件设置正确的MIME类型：

// 在express.static之前添加
express.static.mime.define({
  'application/javascript': ['jsx', 'js'],
});

注意：这个方案仅解决MIME类型问题，但浏览器原生无法解析JSX语法，页面依然会报错，仅用于临时调试，不推荐实际使用。

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