为什么 TypeScript 别名路径在我的 Turborepo 中不起作用？

Question

在我的包目录中使用turborepo设置，我已经为我的Shadcn组件声明了一个

/utils

目录，但是当我调用函数时：

import {cn} from '@utils'

我收到错误：

找不到模块“@utils”或其相应的类型声明。

但是相对路径有效：

import {cn} from '../../utils'

在组件文件中设置为

packages/shadcn/Component/index.tsx

实用工具

路径

packages/utils/index.tsx

代码正确：

import {type ClassValue, clsx} from 'clsx'
import {twMerge} from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

TypeScript 设置

packages/typescript-config/

base.json:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "inlineSources": false,
    "isolatedModules": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@utils/*": ["./packages/utils/*"]
    }
  },
  "exclude": ["node_modules"]
}

package.json:

{
  "name": "@repo/typescript-config",
  "version": "1.0.0",
  "private": true,
  "publishConfig": {
    "access": "public"
  },
  "devDependencies": {
    "typescript": "5.5.4"
  }
}

nextjs.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "./base.json",
  "compilerOptions": {
    "plugins": [{"name": "next"}],
    "allowJs": true,
    "declaration": false,
    "declarationMap": false,
    "incremental": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "resolveJsonModule": true,
    "strict": true,
    "target": "es5"
  },
  "include": ["src", "next-env.d.ts"],
  "exclude": ["node_modules"]
}

尝试在 VSC 中重新启动 TypeScript，但仍然抛出错误

研究

• monorepo 中的 TypeScript“路径”
• 带有 Typescript 路径的 Monorepo 不起作用
• VSCode 的“重启 TS 服务器”在哪里？
• TypeScript 导入路径别名
• 为什么 TypeScript 路径别名不起作用
• Turborepo 导入别名

在我的 Turborepo 中，如何让 TypeScript Alias 路径在我的存储库中工作？

Answer 1

根据您的第一个链接，特别是已解决的link。

建议在每个单独包的 tsconfig 中定义它们，而不是在基本 tsconfig 中。

需要注意的是 Turbo 文档中的基本 tsconfig 也有

"module": "NodeNext"

来自 vercel 的涡轮组件 example 很好地涵盖了这个案例。