typescript - Modul '"@clerk/nextjs"' nema izvezenog člana 'auth'

Implementiram Clerk Js autentifikaciju u svojoj Next aplikaciji.

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 (

Međutim, dobivam pogrešku na terminalu i pregledniku koja kaže: Module '"@clerk/nextjs"' has no exported member 'auth'.ts(2305).

Izbrisao sam auth iz importa i uvezao ga iz/import { auth } from '@clerk/nextjs/dist/types/server'; umjesto toga i ne vraća nikakvu pogrešku.

Prilikom spremanja, dobivam još jednu TypeScript pogrešku: Modul nije pronađen: Putanja paketa ./dist/types/server nije izvezena iz paketa.

Što bi moglo uzrokovati ovo i kako to mogu riješiti. Instalirao sam "@clerk/nextjs": "^5.2.2".

Evo cijelog koda:

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

Evo mog middleware.ts koda iz Clerk dokumentacije:

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)", "/(.*)"],
};

Uvezao sam import { UserButton, auth, useAuth } iz '@clerk/nextjs'; i očekivao sam da ću ga uspješno koristiti za autentifikaciju korisnika:

const Navbar = async () => {
    const {userId} = await auth();
    const isAuth = !!userId

Odgovor #1

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

Uvezi ga iz @clerk/nextjs/server, promijenjeno je s @clerk/nextjs kako bi se smanjila veličina paketa

Odgovor #2

Imao sam sličan problem ranije. Vjerojatno ćeš htjeti koristiti:

1. Komponenta ClerkProvider
2. Svako dijete ove komponente višeg reda imat će pristup posebni hook-ovima za clerk poput useAuth kao i komponentama poput <Signup> itd. kako bi vam olakšali život

3. Ove pogodnosti na strani klijenta neće raditi osim ako se ne koriste:

   • u potomcima komponenti <ClerkProvider>
   • na vrh datoteke stavite 'use client' za sve komponente koje koriste (clerk) hookove, jer su oni isključivo funkcije na strani klijenta.
4. Kao što je osoba gore spomenula, ispravan uvoz je import { auth } from "@clerk/nextjs/server"

Implementacija na strani poslužitelja/pozadinske strane je nešto drugačija.