typescript - Module '"@clerk/nextjs"' n'a aucun membre exporté 'auth'

Je mets en œuvre l'authentification Clerk Js sur mon application Next.

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 (

Cependant, je reçois une erreur sur le terminal et le navigateur qui indique : Le module '"@clerk/nextjs"' n'a pas de membre exporté 'auth'.ts(2305).

J'ai supprimé auth de l'importation et l'ai importé depuis/import { auth } from '@clerk/nextjs/dist/types/server'; à la place et cela ne renvoie aucune erreur.

Lors de l'enregistrement, je reçois encore une autre erreur TypeScript : Module non trouvé : le chemin du package ./dist/types/server n'est pas exporté depuis le package.

Qu'est-ce qui pourrait causer cela et comment puis-je le résoudre. J'ai installé "@clerk/nextjs" : "^5.2.2".

Voici le code complet :

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

Voici mon code middleware.ts provenant de la documentation de Clerk :

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

export default clerkMiddleware();

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

J'ai importé import { UserButton, auth, useAuth } depuis '@clerk/nextjs'; et je m'attendais à l'utiliser avec succès pour authentifier un utilisateur :

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

Réponse #1

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

Importez-le depuis @clerk/nextjs/server, il a été changé depuis @clerk/nextjs pour réduire la taille du bundle

Réponse #2

J'ai eu un problème similaire plus tôt. Vous voulez probablement utiliser :

1. Le composant ClerkProvider
2. Tous les enfants de ce composant d'ordre supérieur auront accès à des hooks spécifiques à Clerk comme useAuth ainsi qu'à des composants comme <Signup>, etc., pour vous faciliter la vie

3. Ces commodités côté client ne fonctionneront pas à moins qu'elles ne soient utilisées :

   • dans les composants descendants de <ClerkProvider>
   • vous mettez 'use client' en haut du fichier pour tous les composants utilisant les hooks (clerk), car ce sont des fonctionnalités purement côté client.
4. Comme la personne ci-dessus l’a mentionné, l’importation correcte est import { auth } from "@clerk/nextjs/server"

L'implémentation côté serveur/backend est légèrement différente.