Docker容器中Webpack构建React项目遇Debug Failure. Unhandled SyntaxKind: ImportClause错误

可能的原因和解决方案 #

1. 检查ts-loader与TypeScript版本兼容性 #

该错误大概率是ts-loader和TypeScript版本不匹配导致的，不同版本的ts-loader对TypeScript有明确的版本要求，旧版ts-loader无法兼容新版TypeScript的语法处理逻辑。

• 执行命令查看当前项目中两者的版本：

  npm ls ts-loader typescript
  

• 根据ts-loader的兼容规则调整版本（如ts-loader 9.x需搭配TypeScript 3.6+，ts-loader 8.x对应TypeScript 3.4+），执行升级或降级：

  # 升级TypeScript到指定兼容版本
  npm install typescript@4.9.5 --save-dev
  # 或调整ts-loader版本
  npm install ts-loader@9.5.1 --save-dev
  

2. 确保容器内重新安装完整依赖 #

MacOS主机的node_modules包含darwin架构的二进制依赖，直接挂载到Linux Alpine容器会导致依赖不兼容，引发构建错误。

• 不要挂载主机的node_modules到容器，在Dockerfile中添加依赖安装步骤：

  FROM node:16.13.1-alpine
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  CMD ["webpack", "--mode", "production", "--progress", "--config", "webpack.prod.js"]
  

• 临时运行容器时执行：

  docker run -v $(pwd):/app -w /app node:16.13.1-alpine sh -c "npm install && webpack --mode production --progress --config webpack.prod.js"
  

3. 调整TypeScript配置 #

检查tsconfig.json，确保没有启用容器内TypeScript版本不支持的特性：

• 确认compilerOptions中的target设置为容器内TS版本支持的选项（如ES6及以上）
• 关闭可能引发兼容性问题的实验性语法特性

4. 替换为babel-loader（备选方案） #

若ts-loader兼容性问题难以解决，可改用babel-loader配合TypeScript预设：

• 安装依赖：

  npm install @babel/core @babel/preset-env @babel/preset-typescript babel-loader --save-dev
  

• 修改webpack配置中的loader规则：

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-typescript'
            ]
          }
        }
      }
    ]
  }
  

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