I am implementing Clerk Js authentication on my next app.
import Link from 'next/link';
import React from 'react';
import { UserButton, auth, useAuth } from '@clerk/nextjs';
// import { auth } from '@clerk/nextjs/dist/types/server';
const Navbar = async () => {
const {userId} = await auth();
const isAuth = !!userId
return (
However, I am getting an error on the terminal and browser that states: Module '"@clerk/nextjs"' has no exported member 'auth'.ts(2305).
I have deleted auth from the import and imported it from // import { auth } from '@clerk/nextjs/dist/types/server'; instead and it returns no error.
Upon saving, I am getting yet another typescript error: Module not found: Package path ./dist/types/server is not exported from package.
What could be causing this and how can I solve it. I have installed "@clerk/nextjs": "^5.2.2".
Here's the complete code:
import Link from 'next/link';
import React from 'react';
import { UserButton, useAuth } from '@clerk/nextjs';
import { auth } from '@clerk/nextjs/dist/types/server';
const Navbar = async () => {
const {userId} = await auth();
const isAuth = !!userId
return (
<div>
<ul className=' flex justify-between m-10 items-center'>
<div>
<Link href="/">
<li>Home</li>
</Link>
</div>
<div className='flex gap-10'>
{!isAuth ? (
<>
<Link href="/sign-in">
<li>Login</li>
</Link>
<Link href="/sign-up">
<li>Signup</li>
</Link>
</>
): (
<>
<Link href="/sign-up">
<li>Profile</li>
</Link>
<li><UserButton/></li>
</>
)}
</div>
</ul>
</div>
)
}
export default Navbar
Here's my middleware.ts code from Clerk Docs:
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)", "/(.*)"],
};
I imported import { UserButton, auth, useAuth } from '@clerk/nextjs'; and was expecting to succefully use it to authicate a user:
const Navbar = async () => {
const {userId} = await auth();
const isAuth = !!userId
import { auth } from "@clerk/nextjs/server";
Import it from @clerk/nextjs/server, it has been changed from @clerk/nextjs to reduce the bundle size