I encountered an error while attempting to add a button using the npx shadcn-ui@latest add button command in a Next.js TypeScript project. The error message is as follows:
SyntaxError: Unexpected token ‘?’
at Loader.moduleStrategy (internal/modules/esm/translators.js:140:18)
at async link (internal/modules/esm/module_job.js:42:21)
I am working on a Next.js project with TypeScript, and I tried to add a button using the npx shadcn-ui@latest add button command. However, the command resulted in a SyntaxError with an unexpected token ‘?’. The error points to a file named index.js within the shadcn-ui module, specifically at line 2.
I expected the command to add a button using the shadcn-ui library to execute successfully without any syntax errors.
folder structure:
└── 📁ai-saas-app
└── .eslintrc.json
└── 📁app
└── favicon.ico
└── globals.css
└── page.tsx
└── 📁components
└── components.json
└── 📁lib
└── utils.ts
└── next-env.d.ts
└── next.config.js
└── package-lock.json
└── package.json
└── postcss.config.js
└── 📁public
└── next.svg
└── vercel.svg
└── README.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.