Next.js教程中添加'use client'到组件时触发错误求助

环境信息 #

• 开发工具：VSCode
• 正在完成Next.js官方Dashboard教程的「显示活跃链接」章节
• 项目依赖版本：

"dependencies": {
    "@heroicons/react": "^2.1.4",
    "@tailwindcss/forms": "^0.5.7",
    "@vercel/postgres": "^0.8.0",
    "autoprefixer": "10.4.19",
    "bcrypt": "^5.1.1",
    "clsx": "^2.1.1",
    "next": "15.0.0-canary.56",
    "next-auth": "5.0.0-beta.19",
    "postcss": "8.4.38",
    "react": "19.0.0-rc-f38c22b244-20240704",
    "react-dom": "19.0.0-rc-f38c22b244-20240704",
    "tailwindcss": "3.4.4",
    "typescript": "5.5.2",
    "use-debounce": "^10.0.1",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.2",
    "@types/node": "20.14.8",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0"
  },
  "engines": {
    "node": ">=20.12.0"
}

问题重现 #

为实现当前页面导航链接高亮，给nav-links.tsx添加客户端代码（注释标记部分）：

// 'use client';

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
// import { usePathname } from 'next/navigation';
// import clsx from 'clsx';

// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
const links = [
  { name: 'Home', href: '/dashboard', icon: HomeIcon },
  {
    name: 'Invoices',
    href: '/dashboard/invoices',
    icon: DocumentDuplicateIcon,
  },
  { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
];

export default function NavLinks() {
  // const pathname = usePathname();

  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className='flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3'
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

添加'use client'后，VSCode报错，页面抛出以下错误：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
    at stringify (<anonymous>)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
digest: "237515360"
 GET /dashboard/customers 200 in 479ms

未添加客户端代码时页面正常运行，尝试查找相关仓库未找到解决方案，需修复错误以实现活跃链接高亮。

解决方案 #

1. 修正Heroicons导入方式 #

@heroicons/react v2版本的图标默认是Server Component兼容的导出结构，在客户端组件中直接批量导入会导致类型异常。改为单独导入每个图标：

import UserGroupIcon from '@heroicons/react/24/outline/UserGroupIcon';
import HomeIcon from '@heroicons/react/24/outline/HomeIcon';
import DocumentDuplicateIcon from '@heroicons/react/24/outline/DocumentDuplicateIcon';

2. 完善客户端组件代码 #

确保'use client'指令放在文件最顶部（不能有任何代码或注释在它之前），同时完整实现高亮逻辑：

'use client';

import UserGroupIcon from '@heroicons/react/24/outline/UserGroupIcon';
import HomeIcon from '@heroicons/react/24/outline/HomeIcon';
import DocumentDuplicateIcon from '@heroicons/react/24/outline/DocumentDuplicateIcon';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';

const links = [
  { name: 'Home', href: '/dashboard', icon: HomeIcon },
  { name: 'Invoices', href: '/dashboard/invoices', icon: DocumentDuplicateIcon },
  { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
];

export default function NavLinks() {
  const pathname = usePathname();

  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        const isActive = pathname === link.href;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              isActive ? 'bg-sky-100 text-blue-600' : 'bg-gray-50'
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

3. 版本兼容检查 #

你当前使用的Next.js 15预览版和React 19 RC版属于不稳定版本，可能存在兼容性问题。如果上述修复无效，可以尝试降级到稳定版本：

• Next.js降级至v14.x稳定版
• React降级至v18.x稳定版

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