Vite+React+shadcn UI项目遇语法错误，页面无法加载求助

根据你描述的现象（注释AlertDialog、cn工具、Link相关代码后页面恢复），问题大概率出在这些模块的导入或代码本身，可按以下步骤排查：

• 确认shadcn组件的导入路径
  shadcn UI的组件需要复制到本地项目components/ui目录下使用，不能直接从@shadcn/ui包导入。检查AlertDialog、Link的导入语句，比如应该是：

  import { AlertDialog, AlertDialogTrigger, AlertDialogContent } from '@/components/ui/alert-dialog'
  import { Link } from '@/components/ui/link'
  

  而非import { AlertDialog } from '@shadcn/ui'，路径错误会导致加载到非JS文件，触发语法错误。

• 检查cn工具函数的正确性
  确保lib/utils.ts中的cn函数代码正确，且依赖包已安装：

  1. 安装依赖：npm install clsx tailwind-merge
  2. 确认cn函数代码：

     import { type ClassValue, clsx } from 'clsx'
     import { twMerge } from 'tailwind-merge'
     
     export function cn(...inputs: ClassValue[]) {
       return twMerge(clsx(inputs))
     }
     

  如果函数代码有误或依赖缺失，会导致导入时抛出语法错误。

• 验证Vite路径别名配置
  检查vite.config.ts和tsconfig.json中的路径别名是否匹配：

  • vite.config.ts配置示例：

    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'),
        },
      },
    })
    

  • tsconfig.json对应配置：

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"]
        }
      }
    }
    

  别名不匹配会导致导入路径解析错误，加载到错误文件。

• 排查组件文件的语法问题
  打开本地的AlertDialog、Link组件文件，检查是否存在语法错误：比如未闭合的括号、多余的逗号、引号不匹配，或者使用了未被Vite支持的特殊语法。

• 清除缓存并重建依赖
  执行以下步骤重置开发环境：

  1. 运行npm run dev -- --clearCache清除Vite缓存
  2. 删除node_modules和package-lock.json
  3. 重新执行npm install
  4. 重启开发服务器

内容的提问来源于stack exchange，提问作者Sethnun Thunder