部署Azure App Service遇TS6142/TS17004错误：需设置--jsx标志

问题分析 #

本地运行和npm run build正常，但Azure部署时触发TS6142/TS17004错误，核心原因是Azure的构建流程没有正确使用Vite的编译逻辑，反而直接触发了TypeScript原生编译，且未读取到tsconfig中的JSX配置。

解决方案 #

1. 强制Azure使用Vite构建命令 #

Azure默认会执行npm run build，但需确保该命令指向正确的Vite构建流程：

• 若你的Vite项目在client子目录，修改根目录package.json的scripts：

  "scripts": {
    "build": "cd client && vite build",
    // 其他脚本...
  }
  

• 或者在Azure App Service的配置页面（配置→常规设置），将构建命令指定为cd client && npm run build。

2. 阻止Azure自动执行tsc编译 #

Azure可能会检测到tsconfig.json并自动触发tsc命令，这会绕过Vite的处理。可以通过以下方式避免：

• 在项目根目录创建tsconfig.azure.json，内容仅针对Node环境：

  {
    "compilerOptions": {
      "composite": true,
      "skipLibCheck": true,
      "module": "ESNext",
      "moduleResolution": "bundler"
    },
    "include": ["vite.config.ts"]
  }
  

• 然后在Azure构建命令中指定使用该配置，避免干扰前端编译：npm run build && tsc --noEmit --project tsconfig.azure.json

3. 校验tsconfig.node.json配置 #

主tsconfig引用了tsconfig.node.json，确保该文件的配置不会干扰前端编译：

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

该文件应仅包含Vite配置相关的Node环境设置，不要添加jsx字段。

4. 指定Azure使用Node.js 18版本 #

在根目录package.json中添加engines字段，强制Azure使用兼容的Node版本：

"engines": {
  "node": "18.x"
}

同时在Azure App Service的配置页面，将Node.js版本设置为18 LTS。

5. 确认部署包包含必要配置文件 #

确保部署时client目录下的tsconfig.json和tsconfig.node.json被正确上传。若使用GitHub Actions或Azure DevOps部署，检查部署脚本是否包含这些文件。

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