Next.js tutorial error when adding 'use client' to a component

Question

I'm following the next.js tutorial from https://nextjs.org/learn/dashboard-app/navigating-between-pages

Using VSCode to edit

Current packages:

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"

I'm doing the last part of the chapter titled "Pattern: Showing active links" - where I'm adding some client interaction with the pages to highlight the link when the user is on the page corresponding to the link. The following code is from the nav-links.tsx. In the ** commented sections is code that I'm supposed to add from the tutorial.

**// '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>
        );
      })}
    </>
  );
}

When I add 'use client' into the file, I keep getting an error from VS-code. When I don't include any of the commented code, the code runs just fine in the browser.

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

Has anyone heard of this error and/or can direct me to a way to fix this...? I've tried looking around the react library and the github page for next.js to see if anyone also ran into this error.

Tried: add 'use client' to the component file and added some features that client components used. Expected: the page would highlight the link that the user is on. Result: Error

Answer 1

Ran into the same error. I terminated the session with

ctrl + c

and just reran the server

pnpm dev

Stack Overflow trying to build a next.js 13 app but use client not working