Next.js项目无法导入@/components/ui/Button组件求助

问题描述 #

在Next.js项目中导入import { Button } from "@/components/ui/button";时出现解析错误，已添加必要依赖但问题仍未解决。

错误截图：

相关页面代码：

"use client";
import { Button } from "@/components/ui/button";
import { UserButton, useUser } from "@clerk/nextjs";
import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api"; 
import { useEffect } from "react";

import Image from "next/image";

export default function Home() {

  const {user} = useUser();
  const createUser = useMutation(api.user.createUser);


  useEffect(() => {
    if (user) {
      user&&CheckUser();
    }
  }, [user]);
  const CheckUser = async()=>{
    const result = await createUser({
      email:user?.primaryEmailAddress?.emailAddress,
      imageUrl:user?.imageUrl,
      userName:user?.fullName
    });
    console.log(result);
  }
  return (
    <div>
      <p>Shree Ganesh ai namah</p>

      
        <UserButton/>
        Hello
        <Button>Click</Button>
      
    </div>
  );
}

排查步骤及解决方案 #

• 检查文件路径有效性
  确认项目中存在components/ui/button.tsx（或.jsx）文件，注意路径大小写（Linux/macOS系统区分大小写）。若文件不存在，需先创建组件或调整导入路径。

• 配置Next.js路径别名
  确保next.config.js中配置了@指向根目录的别名：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      appDir: true,
    },
    webpack: (config) => {
      config.resolve.alias = {
        ...config.resolve.alias,
        "@": path.resolve(__dirname),
      };
      return config;
    },
  };
  
  module.exports = nextConfig;
  

  同时在tsconfig.json（或jsconfig.json）添加路径映射：

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

• 确认UI组件库安装状态
  如果使用shadcn/ui这类组件库，需确认已正确生成Button组件：
  执行命令：npx shadcn-ui@latest add button，确保组件生成在components/ui/button.tsx位置。

• 清除缓存并重启服务
  执行以下命令清除Next.js缓存后重启开发服务：

  rm -rf .next
  npm run dev
  

• 检查依赖版本兼容性
  确认next、react、react-dom版本兼容，避免版本冲突导致解析异常，必要时更新至稳定版本。

内容的提问来源于stack exchange，提问作者Naman Patel