Chakra UI代码片段安装方法及安装后导入失败问题求助

阿华AIGC实验室

2026-3-30

我来帮你排查下这个导入失败的问题，先理清楚你遇到的情况：你已经通过npx @chakra-ui/cli snippet add password-input命令安装了PasswordInput代码片段，CLI也返回了成功提示，但在Vite的JS项目（Chakra UI v3.31.0、Vite v7.3.1）里用import { PasswordInput } from "@/components/ui/password-input"导入时，Vite提示找不到对应文件。

下面是几个排查和解决的方向，你一步步试下：

先确认文件是否真的生成了
直接去项目的src/components/ui目录下看看，有没有password-input.js或者password-input.jsx文件。有时候CLI虽然提示成功，但可能因为目录权限、项目结构特殊等问题，实际没生成文件。如果找不到这个文件，先手动创建src/components/ui这个空目录，再重新跑一遍npx @chakra-ui/cli snippet add password-input命令试试。
检查Vite的路径别名配置
你用的@/是路径别名，对应项目的src/目录，但Vite默认不会自动识别这个别名，得手动配置：
1. 打开项目根目录的vite.config.js文件
2. 添加上别名的配置代码，示例如下：
```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})
```
3. 配置改完后，一定要重启Vite的开发服务器，不然新配置不会生效。
试试补全文件后缀名
在纯JS的Vite项目里，有时候需要显式加上文件后缀才能正确导入。你可以把导入语句改成：
```
import { PasswordInput } from "@/components/ui/password-input.jsx"
```
具体后缀看生成的文件是.js还是.jsx，对应写对就行。
重新安装并检查CLI日志
有可能第一次安装时，某些依赖或者文件写入的步骤没执行完全。你可以先删除项目里的node_modules/.cache目录（Vite的缓存文件夹），然后重新执行安装命令。这次仔细看CLI的输出，有没有一些被忽略的错误提示，比如权限不足、依赖安装失败之类的。
对齐Chakra UI和CLI的版本
确保@chakra-ui/cli的版本和你项目里的Chakra UI版本一致（都是v3.31.0）。可以先卸载全局的CLI：npm uninstall -g @chakra-ui/cli，然后在项目里安装同版本的开发依赖：npm install -D @chakra-ui/cli@3.31.0，之后再重新安装代码片段。