ui icon indicating copy to clipboard operation
ui copied to clipboard

[bug]: Validation failed: - resolvedPaths: Required,Required,Required,Required,Required

Open ravenkim opened this issue 1 year ago • 3 comments

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

image

Affected component/components

init

How to reproduce

  1. yarn 4.4
  2. vite
  3. 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 avatar Sep 04 '24 06:09 ravenkim

@ravenkim is this a new vite project with react?

shadcn avatar Sep 04 '24 07:09 shadcn

@shadcn i got two project in new one and old one have same problem

with react vite

ravenkim avatar Sep 04 '24 08:09 ravenkim

#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 avatar Sep 04 '24 08:09 ravenkim

@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 avatar May 12 '25 16:05 afonsocrg

@afonsocrg
In my case, works well except cn

Image

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

ravenkim avatar May 13 '25 00:05 ravenkim

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.json contains the correct paths and baseUrl
  • components.json is valid and includes aliases, componentPath, tsconfig, and tailwindConfig
  • 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.

eaxus90 avatar Jun 25 '25 19:06 eaxus90

@afonsocrg this works perfectly for me

reinvertise avatar Jul 13 '25 00:07 reinvertise

I had to tune resolving in tsconfig.json.

{
    "compilerOptions" :{
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    }
}

HypnoOcio avatar Nov 21 '25 14:11 HypnoOcio