使用 shadcn-ui 在 Next.js TypeScript 项目中添加按钮时出错

Question

我在 Next.js TypeScript 项目中尝试使用 npx shadcn-ui@latest add 按钮命令添加按钮时遇到错误。错误信息如下：

语法错误：意外的标记“？” 在 Loader.moduleStrategy （内部/模块/esm/translators.js:140:18） 在异步链接（内部/模块/esm/module_job.js：42：21）

我正在使用 TypeScript 开发 Next.js 项目，并尝试使用 npx shadcn-ui@latest add 按钮命令添加按钮。但是，该命令导致语法错误，并带有意外标记“？”。该错误指向 shadcn-ui 模块中名为 index.js 的文件，特别是在第 2 行。

我希望使用 shadcn-ui 库添加按钮的命令能够成功执行，没有任何语法错误。

文件夹结构：

└── 📁ai-saas-app └── .eslintrc.json └── 📁应用程序 └── favicon.ico └── 全局变量.css └── 页.tsx └── 📁组件 └── 组件.json └── 📁lib └── utils.ts └── next-env.d.ts └── next.config.js └── package-lock.json └── package.json └── postcss.config.js └── 📁公共 └── 下一个.svg └── vercel.svg └── 自述文件.md └── tailwind.config.js └── tailwind.config.ts └── tsconfig.json

Steps Taken:

I created a Next.js TypeScript project.
I ran the command npx shadcn-ui@latest add button to add a button component from the shadcn-ui library.
The command installation process took place, but it resulted in the SyntaxError mentioned above.

Answer 1

您安装了什么版本的节点？我曾经看到过一些类似的错误，只需将节点升级到较新的版本即可解决这些错误。你可以试试。