Theo's Typesafe Cult•12mo 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•11mo ago

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

General MudkippOP•11mo 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•11mo ago

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

General MudkippOP•11mo ago

No problem!

Gaming

Programming

Clerk Webpack Importing Error