React使用Docker运行时出现Uncaught ReferenceError: regeneratorRuntime未定义

针对Babel 6.x（你的当前版本6.26.0） #

• 安装必需依赖：

  npm install --save-dev babel-plugin-transform-runtime
  npm install --save babel-runtime
  

• 修改.babelrc配置文件，添加转换插件：

  {
    "presets": ["react", "es2015"],
    "plugins": ["transform-runtime"]
  }
  

• 修正Docker构建流程：
  确保Dockerfile中完整安装所有依赖，不要跳过开发依赖（babel-plugin-transform-runtime属于构建必需的开发依赖），示例Dockerfile：

  # 构建阶段
  FROM node:14-alpine AS builder
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN npm run build
  
  # 生产阶段
  FROM nginx:alpine
  COPY --from=builder /app/build /usr/share/nginx/html
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]
  

针对Babel 7.x（你升级后的版本） #

• 清理旧依赖并安装Babel 7核心包：

  npm uninstall babel-core babel-preset-es2015 babel-preset-react babel-plugin-transform-runtime babel-runtime
  npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime
  npm install --save @babel/runtime
  

• 更新.babelrc为Babel 7格式：

  {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  }
  

• 检查Docker构建缓存：
  构建前清理Docker缓存（docker builder prune），避免旧的node_modules残留导致依赖缺失，确保npm run build在依赖安装完成后执行。

额外排查点 #

• 确认代码中是否使用了async/await或Generator函数，这类语法必须依赖regeneratorRuntime，上述插件会自动注入该变量。
• 如果使用Create React App，不要手动修改Babel配置，建议升级到最新版CRA（内置了完整的语法转换支持），或使用react-app-rewired扩展配置。

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