pjh
pjh

Reputation: 1

Monorepo tsconfig alias path in packages not work

I use turborepo + vite + react + typescript.

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

export default defineConfig({
  resolve: {
    preserveSymlinks: true,
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});
// apps/web/tsconfig.ts
{
  "extends": "@repo/typescript-config/vite.json",
  "include": ["src"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
// apps/web/package.json
{
  "private": true,
  "scripts": {
    "build": "turbo build",
    "dev": "turbo dev",
    "lint": "turbo lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "devDependencies": {
    "@types/node": "^22.13.1",
    "eslint": "^8.57.0",
    "prettier": "^3.2.5",
    "turbo": "^2.4.0"
  },
  "name": "with-vite",
  "packageManager": "[email protected]",
  "workspaces": [
    "apps/*",
    "packages/*"
  ]
}

// packages/ui/vite.config.ts
import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [react(), dts()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'index',
      formats: ['es'],
      fileName: () => `index.js`,
    },
    rollupOptions: {
      external: [
        'react',
        'react-dom',
        'react-router-dom',
        'jotai',
        'i18next',
        'react-i18next',
        'tailwindcss',
        'tailwindcss-animate',
        'tailwind-scrollbar-hide',
        'swr',
        '@tanstack/react-query',
      ],
      output: {
        dir: 'dist',
      },
    },
  },
});
// packages/ui/tsconfig.json
{
  "extends": "@repo/typescript-config/base.json",
  "include": ["."],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
// packages/ui/package.json
{
  "name": "@repo/ui",
  "version": "0.0.0",
  "type": "module",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": "./src/index.ts",
    "./*": "./src/index.ts"
  },
  "license": "MIT",
  "scripts": {
    "build": "vite build",
    "lint": "eslint \"**/*.ts\""
  },
  "dependencies": {
    "@repo/other": "*"
  },
  "devDependencies": {
    "@repo/eslint-config": "*",
    "@repo/typescript-config": "*",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "eslint": "^8.57.0",
    "typescript": "5.5.4",
    "vite-plugin-dts": "^4.5.0"
  }
}

What I want is import by alias path in packages/ui by itself. When I yarn build, I got this error.

// packages/ui/components/counter.tsx
import { Counter as OtherCounter } from '@repo/other/counter';
import { Header as MyHeader } from '@/components/header'; // packages/ui/src/components/header.tsx

export function Counter() {
  return <>
<MyHeader/>
<OtherCounter/>
</>;
}
web:build: cache miss, executing 3b572a382f6b74a5
web:build:
yarn run v1.22.22
$ tsc && vite build
web:build: ../../packages/ui/src/components/counter.ts:2:36 - error TS2307: Cannot find module '@/components/header' or its corresponding type declarations.
web:build:
web:build: 2 import { Header as MyHeader } from '@/components/header';
web:build:                                      ~~~~~~~~~~~~~~~~~~~~~
web:build:
web:build:
web:build: Found 1 error in ../../packages/ui/src/components/counter.ts:2
web:build:
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
web:build: ERROR: command finished with error: command (/Users/user/Desktop/turborepo/apps/web) /var/folders/cs/qc30h8g92tl4g2qlch7hx8vr0000gn/T/yarn--1739347774326-0.04487794325714667/yarn run build exited (2)
web#build: command (/Users/user/Desktop/turborepo/apps/web) /var/folders/cs/qc30h8g92tl4g2qlch7hx8vr0000gn/T/yarn--1739347774326-0.04487794325714667/yarn run build exited (2)

 Tasks:    1 successful, 2 total
Cached:    0 cached, 2 total
  Time:    1.707s
Failed:    web#build

 ERROR  run failed: command  exited (2)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I don't know why and what should I do..

Upvotes: 0

Views: 25

Answers (0)

Related Questions