TurboRepo中Vite React构建忽略'use client/server'源映射警告方案

以下是几种可行的解决方案，按需选择：

1. 用Vite插件临时处理指令（推荐） #

写一个轻量Vite插件，在构建阶段将共享组件中的"use client";和"use server";指令转为注释，既不影响Next.js识别，又能消除Vite的sourcemap警告：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'strip-next-directives',
      transform(code, id) {
        // 仅匹配共享UI组件目录下的tsx/jsx文件
        if (id.includes('/packages/ui/') && (id.endsWith('.tsx') || id.endsWith('.jsx'))) {
          // 将开头的指令转为注释
          return code.replace(/^("use client";|"use server";)/gm, '// $1');
        }
        return code;
      }
    }
  ],
  // 其他原有配置
});

注：该插件仅在Vite构建过程中临时修改代码，共享组件的源文件不会被改动，Next.js项目使用时仍能正常解析指令。

2. 配置共享组件的TypeScript环境 #

在共享组件包的tsconfig.json中添加Next.js类型声明，避免TypeScript对指令的报错，间接减少sourcemap解析异常：

// packages/ui/tsconfig.json
{
  "compilerOptions": {
    "types": ["next"],
    // 其他原有配置
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. 禁用生产环境Sourcemap（妥协方案） #

如果不需要生产环境的sourcemap，可直接关闭以消除警告：

// vite.config.ts
export default defineConfig({
  build: {
    sourcemap: false
  },
  // 其他原有配置
});

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