.NET 8升级后Azure DevOps发布步骤失败，求解决方案及代码

问题分析 #

本地运行正常但Azure DevOps发布失败，报错涉及JSX命名空间找不到、Link组件className属性不存在，核心原因是TypeScript类型配置不兼容或构建环境依赖未同步，具体包括：

• React相关类型包版本不匹配
• tsconfig.json配置未适配.NET 8构建流程
• React Router Link组件类型使用错误
• Azure DevOps构建步骤未正确处理前端依赖

解决方案及代码示例 #

1. 同步并更新前端依赖版本 #

确保本地与构建服务器的依赖版本一致，重点更新TypeScript及React类型包：
修改package.json的devDependencies：

{
  "devDependencies": {
    "typescript": "^5.0.0", // 适配React 17+/18版本
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "@types/react-router-dom": "^6.14.0" // 若使用react-router-dom v6
  }
}

执行npm install，并在Azure DevOps构建管道中添加npm依赖安装步骤。

2. 修正tsconfig.json配置 #

确保TypeScript能正确识别React JSX类型，调整核心配置：

{
  "compilerOptions": {
    "jsx": "react-jsx", // React 17+推荐使用该模式，旧版本可设为"react"
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["react", "react-dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true // 可选：跳过类型库检查，避免版本冲突报错
  },
  "include": ["ClientApp/**/*"],
  "exclude": ["node_modules"]
}

3. 修复Link组件类型错误 #

针对className属性不存在的报错，调整React Router Link的类型使用：

场景1：直接使用Link组件

import { Link } from 'react-router-dom';

export const GameId = () => {
  // 直接在Link上使用className，v6版本默认支持该属性
  return (
    <div>
      <Link to="/game/123" className="game-id-link">
        Game ID: 123
      </Link>
    </div>
  );
};

场景2：自定义Link组件（处理联合类型）

如果props是LinkProps | Readonly<...>的联合类型，通过类型断言缩小范围：

import { Link, LinkProps } from 'react-router-dom';

interface CustomGameLinkProps extends LinkProps {
  gameId: string;
}

export const CustomGameLink = ({ gameId, className, ...rest }: CustomGameLinkProps) => {
  // 若存在类型歧义，用类型断言明确属性
  const linkProps = { to: `/game/${gameId}`, className } as LinkProps;
  return <Link {...linkProps} {...rest} />;
};

4. 调整Azure DevOps构建管道配置 #

确保构建流程先处理前端依赖，再执行.NET发布：

# 安装指定版本Node.js
- task: NodeTool@0
  inputs:
    versionSpec: '16.16.0'
  displayName: 'Install Node.js 16.16.0'

# 安装npm依赖
- script: npm install
  workingDirectory: '$(Build.SourcesDirectory)/ClientApp'
  displayName: 'Install frontend dependencies'

# 执行前端构建
- script: npm run build
  workingDirectory: '$(Build.SourcesDirectory)/ClientApp'
  displayName: 'Build frontend assets'

# .NET发布步骤
- task: DotNetCoreCLI@2
  inputs:
    command: 'publish'
    publishWebProjects: true
    arguments: '--configuration Release --output $(Build.ArtifactStagingDirectory)'
  displayName: 'Publish .NET 8 project'

同时检查项目csproj文件中的前端构建配置，确保发布时自动触发前端构建：

<PropertyGroup>
  <SpaRoot>ClientApp\</SpaRoot>
</PropertyGroup>

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" Condition="!Exists('$(SpaRoot)node_modules')" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)build\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

内容的提问来源于stack exchange，提问作者Amit N Thore