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
Shiielty11mo ago
Hi, did you find the solution for this? I have the same problem when code along with theo's T3 video
General Mudkipp
General Mudkipp11mo 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
Shiielty11mo ago
Add "use client" works on my case Thanks for the reply man! 🤝
General Mudkipp
General Mudkipp11mo ago
No problem!
Want results from more Discord servers?
Add your server