NextJS 13+TS Monorepo迁移后模块解析失败问题求助

你遇到的错误是因为NextJS未正确处理UI包中的TypeScript代码，以下是几个可能遗漏的配置项：

• 给UI包添加TypeScript配置
  在packages/ui目录下创建tsconfig.json，配置基础的TS编译规则：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "moduleResolution": "node",
      "jsx": "react-jsx",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "declaration": true,
      "outDir": "./dist"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
  }
  

• 配置UI包的构建脚本
  在packages/ui/package.json中添加构建命令，确保TS代码能被编译：

  {
    "name": "ui",
    "version": "0.0.1",
    "scripts": {
      "build": "tsc",
      "dev": "tsc --watch"
    },
    "dependencies": {
      "classnames": "^2.3.2"
    },
    "devDependencies": {
      "typescript": "^5.0.0"
    }
  }
  

  同时确认根目录的turbo.json中包含UI包的build任务，让Turbo自动处理依赖构建：

  {
    "$schema": "https://turbo.build/schema.json",
    "pipeline": {
      "build": {
        "dependsOn": ["^build"],
        "outputs": ["dist/**"]
      },
      "dev": {
        "cache": false,
        "persistent": true
      }
    }
  }
  

• 完善NextJS的转译配置
  确保apps/frontend/next.config.js的配置格式正确，transpilePackages包含ui：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      transpilePackages: ['ui'],
    },
    // 其他原有配置
  }
  
  module.exports = nextConfig
  

  可选优化：在apps/frontend/tsconfig.json中添加路径映射，简化组件导入路径：

  {
    "compilerOptions": {
      "paths": {
        "ui/*": ["../../packages/ui/src/*"]
      }
    }
  }
  

• 重新安装依赖
  在根目录运行yarn install或npm install，确保UI包的依赖和项目链接关系正确。

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