使用Turbo Repo的Next.js 13出现interface解析失败问题求助

问题根源 #

这个报错是因为Webpack没识别到文件是TypeScript（TS）类型，无法用TS加载器处理interface这类专属语法。结合Turbo Repo的monorepo场景，大概率是文件命名、配置传递或者Webpack自定义配置出了问题。

分步解决 #

• 检查文件扩展名
  确保包含interface的文件后缀是.ts或.tsx，如果写成.js/.jsx，Webpack会直接把文件当作JS处理，自然不识别TS语法。

• 核对Turbo Repo的TS配置继承
  在Turbo的monorepo结构中，每个子包的tsconfig.json必须正确继承根目录的TS配置，否则子包的TS语法无法被正确编译。示例子包配置：

  // packages/your-component-package/tsconfig.json
  {
    "extends": "../../tsconfig.json",
    "compilerOptions": {
      "rootDir": "./src",
      "outDir": "./dist"
    }
  }
  

  同时turbo.json里的任务配置不要屏蔽TS编译依赖，比如dev任务要确保依赖的子包先完成TS构建（如果有前置构建需求）。

• 修复Next.js的Webpack自定义配置
  若之前修改过next.config.js的Webpack配置，注意不要直接覆盖默认的module.rules——Next.js默认已配置TS加载器，全替换规则会丢失TS处理逻辑。正确做法是在默认配置基础上扩展：

  // next.config.js
  const nextConfig = {
    webpack: (config) => {
      // 仅添加自定义规则，保留默认TS处理逻辑
      config.module.rules.push({
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      });
      return config;
    },
  };
  
  module.exports = nextConfig;
  

  要是之前完全重写了module.rules，请恢复默认配置后再添加自定义规则。

• 清理缓存重新构建
  Turbo和Next.js的缓存可能导致旧配置残留，执行以下命令重置环境：

  rm -rf node_modules .turbo .next
  pnpm install # 替换为你使用的npm/yarn
  pnpm run dev
  

• 处理monorepo共享包的TS编译
  若报错的interface来自共享子包，需要让Next.js直接编译该子包的TS代码，在next.config.js中添加：

  // next.config.js
  const nextConfig = {
    transpilePackages: ['your-shared-ui-package'],
  };
  

报错代码片段：
hra:dev: > interface Props { item?:any fieldname?: string

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