After following the instructions to install a Chakra UI snippet at https://chakra-ui.com/docs/get-started/installation#add-snippets, I still get an error that the import failed to resolve.

I added the snippet with the command

npx @chakra-ui/cli snippet add password-input

It produced output indicating the installation was successful:

┌ Chakra CLI ⚡️ | ● Adding 1 snippet(s)... │ ◇ Installing required dependencies │ ◇ Writing selected snippets │ └ 🎉 Done!

When I try to import the component that I installed, like so:

import { PasswordInput } from "@/components/ui/password-input"

I get the error:

[vite] Internal server error: Failed to resolve import "@/components/ui/password-input" from "src/App.jsx". Does the file exist?

Chakra UI version 3.31.0

Vite 7.3.1 with JavaScript (not typescript)

Am I missing something?

Dane Iracleous's user avatar

I figured out the problem. I had to change vite.config.js to include jsconfigPaths(), like so:

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import jsconfigPaths from "vite-jsconfig-paths" // https://vite.dev/config/ export default defineConfig({ plugins: [react(), jsconfigPaths()], })

And I had to install the package:

npm install vite-jsconfig-paths

Dane Iracleous's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.