[BUG]npx 使用 shadcn工具添加UI组件失败

@[TOC]([BUG]npx 使用 shadcn工具添加UI组件失败)

问题

背景:

想要使用magic ui中的组件, 相关link: https://magicui.design/docs/components/marquee
通过npx 来添加一个组件,来实现个人博客的动态效果, 代码源头如下:

复现报错

运行代码

npx shadcn@latest add "https://magicui.design/r/marquee"

报错信息如下:

表示遇到了一个url不能识别的问题

(node:80281) [DEP0170] DeprecationWarning: The URL http://your-proxy-server:port is invalid. Future versions of Node.js will throw an error.
(Use `node --trace-deprecation ...` to show where the warning was created)
npm error code ERR_INVALID_URL
npm error Invalid URL
npm error A complete log of this run can be found in: //.npm/_logs/2024-12-19T05_46_57_240Z-debug-0.log

问题截图

解决方案

操作步骤

第一步. 先重置当前的proxy配置

# 移除当前用户的代理设置
npm config rm proxy
npm config rm https-proxy
npm config delete proxy
npm config delete https-proxy

# 移除全局的代理设置
npm config --global rm proxy
npm config --global rm https-proxy

# 设置 npm 注册表为 http://registry.npmjs.org
npm config set registry https://registry.npm.taobao.org #如果中国境内的同学需要使用淘宝的proxy
# npm config set registry "http://registry.npmjs.org" # 默认proxy 

# 禁用严格的 SSL 验证
npm config set strict-ssl false

然后我遇到第二个报错: 这个报错说明需要手动去配置 组件需要的环境

✔ You need to create a components.json file to add components. Proceed? … yes

We could not detect a supported framework at .
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.

第二步: 根据链接配置对应的环境

相关link: ui.shadcn.com/docs/instal… 这里记得 需要先安装 Tailwind CSS

第三步: 最后运行代码

问题解决

(base) @bogon private_blog % npx shadcn@latest add "https://magicui.design/r/marquee"
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Created 1 file:
  - components/ui/marquee.tsx

总结

1. npm 网络问题可以通过重置代理, 并使用国内淘宝代理来解决
2. 使用magic ui中的组件之前需要先手动配置当前的环境