Reputation: 1
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