Search code examples
reactjsauthenticationnext.jsclerk

"Webpack imported module userClerk is not a function" Error

I am working on a Next js 14 project using Clerk for auth. in my Navbar I am using useUser() normally as in this code (This is the UserMenu.tsx component imported in NavBar.tsx component ):

import * as React from "react";
import {useClerk, useUser} from "@clerk/nextjs";

export function UserMenu() {
const { isSignedIn, user, isLoaded } = useUser();
let avatar = null;
if (!isLoaded) {
    avatar = null;
}
if (isSignedIn && user && user.imageUrl) {
    avatar = user.imageUrl;
}
return (
    ...... \\CODE
);
}

That code does the job correctly, I am trying to the same in app\home\page.tsx

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

const Page = async () => {
const { isSignedIn, user, isLoaded } = useUser();
return (
   // CODE
);
};
export default Page;

But this time it doesnt work, I get this error
enter image description here

Unhandled Runtime Error
Error: (0 , _clerk_nextjs__WEBPACK_IMPORTED_MODULE_5__.useUser) is not a function

Knowing that I am correctly wrapping my app arround the <ClerkProvider>

enter image description here

I need some help please, Thank you.

Solution

  • I had this problem too... The solution is add "use client" at the top.

    "use client";

import * as React from "react";
import { useClerk, useUser } from "@clerk/nextjs";

export function UserMenu() {
  const { isSignedIn, user, isLoaded } = useUser();
  let avatar = null;

  if (!isLoaded) {
    avatar = null;
  }

  if (isSignedIn && user && user.imageUrl) {
    avatar = user.imageUrl;
  }

  return (
    // ...... CODE
  );
}