Docker部署React应用报错Can't resolve 'react/jsx-runtime'

这个错误和缺jsx-runtime包没有直接关系，核心是依赖版本冲突+Docker构建逻辑有问题：

• react/jsx-runtime是React 17.0.0及以上版本内置的模块入口，不是第三方独立包，你单独安装同名第三方jsx-runtime包反而会干扰模块解析，完全没用。
• 你混用了跨大版本的MUI组件库：报错路径里的@mui/icons-material是MUI v5+版本的包，但是Dockerfile里安装的@material-ui/core、@material/theme是已经停止维护的MUI v4及更早版本的包，两个大版本依赖树完全不兼容，加上你所有安装命令都加了--force参数跳过依赖校验，直接导致npm把版本冲突的React、MUI包装到一起，最终镜像里的React版本很可能被冲成16.x，根本没有内置jsx-runtime入口。
• 你没有配置.dockerignore，大概率把本地的node_modules直接拷贝进了镜像，覆盖了容器内安装的Linux环境依赖，进一步加剧版本混乱。
• Dockerfile里零散写多条RUN npm install命令，既破坏构建缓存，也容易出现依赖声明不同步的问题。

• 第一步：先在本地项目里对齐依赖版本，清理冲突包
  执行以下命令卸载冲突的旧版MUI和无用的独立jsx-runtime包：

  npm uninstall @material-ui/core @material/theme jsx-runtime
  

  安装和@mui/icons-material版本匹配的MUI v5全量依赖：

  npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
  

  确认React版本不低于17.0.0，执行npm list react查看版本，如果低于17直接升级到稳定版：

  npm install react@^18.2.0 react-dom@^18.2.0
  

• 第二步：在项目根目录新建.dockerignore文件，避免本地冗余文件被打进镜像，文件内容如下：

  node_modules
  build
  .git
  .env.local
  npm-debug.log
  Dockerfile
  .dockerignore
  

• 第三步：修正Dockerfile配置，去掉所有零散的依赖安装命令和--force参数，修正后参考配置：

  FROM node:16-alpine
  WORKDIR /client
  # 修正PATH配置，和工作目录保持一致
  ENV PATH /client/node_modules/.bin:$PATH
  
  # 先拷贝依赖声明文件，最大化利用Docker构建缓存
  COPY package.json package-lock.json ./
  # 用npm ci严格按照锁文件安装依赖，保证容器内外版本完全一致
  RUN npm ci
  RUN npm install -g nodemon
  
  # 最后拷贝项目源码
  COPY . ./
  
  EXPOSE 3000
  CMD ["npm", "start"]
  

• 第四步：清理旧缓存重新构建镜像，避免之前错误构建的缓存层影响结果
  先删除本地旧的依赖和锁文件重新生成：

  rm -rf node_modules package-lock.json
  npm install
  

  执行构建命令时禁用缓存：

  docker build --no-cache -t react-client .
  

• 后续所有依赖都直接在本地通过npm安装写入package.json，不要在Dockerfile里单独写RUN npm install 某包的命令，避免容器内外依赖版本不一致。
• 非必要不要加--force、--legacy-peer-deps这类跳过依赖校验的参数，这类参数只会暂时掩盖版本冲突，最终运行时一定会出现模块找不到、方法不存在这类诡异问题。

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