ui
ui copied to clipboard
[bug]: Validation failed: - resolvedPaths: Required,Required,Required,Required,Required
Describe the bug
when I init
✔ Preflight checks. ✔ Verifying framework. Found Vite. ✔ Validating Tailwind CSS. ✔ Validating import alias.
Something went wrong. Please check the error below for more details. If the problem persists, please open an issue on GitHub.
Validation failed:
- resolvedPaths: Required,Required,Required,Required,Required
Affected component/components
init
How to reproduce
- yarn 4.4
- vite
- js
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
{
"packageManager": "[email protected]",
"name": "boilerplate_fe",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.9.0",
"@types/node": "^22.5.3",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.20",
"eslint": "^9.9.0",
"eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"postcss": "^8.4.44",
"tailwindcss": "^3.4.10",
"vite": "^5.4.1"
}
}
Before submitting
- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues
@ravenkim is this a new vite project with react?
@shadcn i got two project in new one and old one have same problem
with react vite
#in recent project
in recent project , when i pull new component
everything works well except
cn path
every {cn} path in new components looks like
import { cn } from "s/lib/utils"
it worked well before like
import { cn } from "src/assets/shadcn/utils"
i have utils in aliases
"aliases": {
"components": "./src/assets/shadcn/components",
"utils": "./src/assets/shadcn/utils"
}
i tried to put these but it doesnt work
"aliases": {
"components": "./src/assets/shadcn/components",
"utils": "./src/assets/shadcn/lib/utils",
"ui": "./src/assets/shadcn/components/ui",
"lib": "./src/assets/shadcn/lib",
"hooks": "./src/assets/shadcn/hooks"
}
##vite.config.js
resolve: {
alias: {
src: path.resolve(__dirname, 'src'),
},
},
jsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "ES6",
"module": "commonjs",
"baseUrl": "./",
"paths": {
"src/*": ["src/*"]
},
"allowJs": true,
"checkJs": false,
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
to
{
"files": [],
"references": [
{
"path": "./jsconfig.app.json"
},
{
"path": "./jsconfig.node.json"
}
],
"compilerOptions": {
"jsx": "react-jsx",
"target": "ES6",
"module": "commonjs",
"baseUrl": ".",
"paths": {
"./src/*": ["./src/*"]
},
"allowJs": true,
"checkJs": false
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
#in new project
##jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"./src/*": [
"./src/*"
]
}
},
"include": [
"src"
]
}
##vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
src: path.resolve(__dirname, 'src'),
},
},
})
https://github.com/ravenkim/boilerplate_fe
@ravenkim I had the same problem, and after reading this page, the following worked:
{
// ... Rest of the config
"aliases": {
"components": "@/components",
"utils": "@/utils",
"ui": "@/components/ui",
"hooks": "@/hooks",
"lib": "@/utils"
}
}
It seems that shadcn is expecting to receive a path alias, and not a relative path
@afonsocrg
In my case, works well except cn
https://github.com/ravenkim/ss-react-boilerplate-ts
every components go into right place
but only one line "import { cn } from 'src/shared/lib/shadcn/lib/utils.ts'" does not work so when I put new component, then I just change only cn's direction
I'm facing almost exactly the same issue — and have been stuck on this for 2 days now.
I've tried at least 10 clean attempts to install shadcn into a fresh Vite + React + TypeScript project, following the official documentation step by step.
Each time I run:
npx shadcn@latest init
I get the following:
✔ Preflight checks.
⠋ Verifying framework.
Something went wrong. Please check the error below for more details.
Validation failed:
- resolvedPaths: Required,Required
The same error occurs when I try to add components using:
npx shadcn add button
I've triple-checked that my:
tsconfig.app.jsoncontains the correctpathsandbaseUrlcomponents.jsonis valid and includesaliases,componentPath,tsconfig, andtailwindConfig- All files are present in the correct places (
src/,tailwind.config.js, etc.)
It seems like the CLI fails to detect the framework or cannot resolve paths correctly.
💡 Is there a known workaround or fix?
I'd really appreciate any help or insights — happy to provide a minimal reproducible example if needed.
@afonsocrg this works perfectly for me
I had to tune resolving in tsconfig.json.
{
"compilerOptions" :{
...
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
}
}