Theo's Typesafe Cult•6mo ago

Clerk Webpack Importing Error

I'm trying to use the useUser() function provided with Clerk, however I'm getting this error whenever I try to compile it:

Unhandled Runtime Error

Error: (0 , _clerk_nextjs__WEBPACK_IMPORTED_MODULE_1__.useUser) is not a function

Unhandled Runtime Error

Error: (0 , _clerk_nextjs__WEBPACK_IMPORTED_MODULE_1__.useUser) is not a function

Here's the code:

import { UserButton, useUser } from "@clerk/nextjs";

const Sidebar = () => {
  const user = useUser();

  return (
    <header
      className="..."
    >
      <div className="...">
        <h1>Work in Progress</h1>
      </div>

      <div className="..."></div>

      <div className="...">
        <UserButton afterSignOutUrl="/" />
        <h2 className="...">Welcome, {user?.fullName}</h2>
      </div>
    </header>
  );
};

export default Sidebar;

import { UserButton, useUser } from "@clerk/nextjs";

const Sidebar = () => {
  const user = useUser();

  return (
    <header
      className="..."
    >
      <div className="...">
        <h1>Work in Progress</h1>
      </div>

      <div className="..."></div>

      <div className="...">
        <UserButton afterSignOutUrl="/" />
        <h2 className="...">Welcome, {user?.fullName}</h2>
      </div>
    </header>
  );
};

export default Sidebar;

Solution:

Add "use client" works on my case Thanks for the reply man! 🤝...

Jump to solution

4 Replies

Shiielty•6mo ago

Hi, did you find the solution for this? I have the same problem when code along with theo's T3 video

General Mudkip•6mo ago

Yes, but I'm not entirely sure what fixed it. Here's what looks different from my old code; - const { user } = useUser(); - "use client" directive at the top - if (!user) { return null } before the actual return statement Hopefully that fixes it for you

Solution

Shiielty•6mo ago

Add "use client" works on my case Thanks for the reply man! 🤝

General Mudkip•6mo ago

No problem!

Gaming

Programming

Clerk Webpack Importing Error