使用Docker-Compose运行React-Vite应用时出现_jsxDEV未定义错误

问题本质 #

_jsxDEV is not a function错误是React开发环境的JSX转换逻辑失效导致的：_jsxDEV是React在开发模式下转换JSX的核心函数，只有当Vite以开发模式正确启动并加载React SWC插件时才会被注入。

之所以docker run正常、docker-compose up报错，核心差异在于Compose的卷挂载配置：你把本地frontend目录完整挂载到容器/app，虽然通过/app/node_modules匿名卷保留了容器内的依赖，但本地目录的Vite缓存、配置文件与容器内构建内容产生冲突，导致SWC插件无法正确处理开发模式的JSX转换；另外如果.env未设置ENVIRONMENT=development，容器可能误执行生产构建命令而非开发服务。

解决方案 #

1. 确保开发环境变量正确配置 #

检查根目录的.env文件，添加ENVIRONMENT=development；或者直接在docker-compose.yml中明确设置环境变量，避免因变量缺失导致启动逻辑错误：

frontend:
  # ... 其他配置
  environment:
    - ENVIRONMENT=development

2. 优化卷挂载，避免容器内文件冲突 #

不要将整个本地frontend目录挂载到容器/app，改为仅挂载需要热更新的源码目录，减少挂载带来的干扰：

frontend:
  build: ./frontend
  ports:
    - "5173:5173"
  volumes:
    - ./frontend/src:/app/src  # 仅挂载源码目录
    - ./frontend/public:/app/public  # 挂载静态资源目录
    - /app/node_modules  # 保留容器内的依赖包
    - frontend_build:/app/dist
    - type: bind
      source: ./.env
      target: /app/.env
  env_file:
    - .env
  environment:
    - ENVIRONMENT=development

3. 修复entrypoint.sh的容错逻辑 #

修改entrypoint.sh，默认走开发模式启动，避免因环境变量取值异常导致错误执行构建命令：

#!/bin/bash
if [ "$ENVIRONMENT" = "production" ]; then
  npm run build
else
  npm run dev
fi

4. 清理缓存并重新构建容器 #

删除旧容器和镜像缓存，确保容器内的依赖、配置与代码完全一致：

# 停止并删除现有容器
docker-compose down
# 清除镜像缓存并重新构建
docker-compose build --no-cache
# 启动服务
docker-compose up

验证 #

完成上述修改后重新启动服务，打开页面检查控制台，确认_jsxDEV未定义的错误是否消失。

内容的提问来源于stack exchange，提问作者Serban Marin-Eusebiu