Chapter 5 Adding 'use client' to navlinks.tsx causes webpack loader issue

[rorymullan]

As soon as I use 'use client' in chapter 5 I'm running into a problem. Here's my code:

'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={clsx(
              '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',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

And here's the error:

Any advice?

[ninjasort]

I'm getting the same issue

[santigie-sankoh]

This is something I faced long since.

[ninjasort]

Try removing yarn.lock and running yarn again.

[Von0816]

if anyone having issue after adding the 'use client' in this chapter, you can try restarting the server and see if that helps

[DataThomas]

if anyone having issue after adding the 'use client' in this chapter, you can try restarting the server and see if that helps

this worked for me thank you! (1. "crtl + c" to stop server 2, "pnpm dev" to restart)