typescriptauthenticationnext.jsclerk

Module '"@clerk/nextjs"' has no exported member 'auth'


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

Solution

  • import { auth } from "@clerk/nextjs/server";
    

    Import it from @clerk/nextjs/server, it has been changed from @clerk/nextjs to reduce the bundle size