Tengo una aplicación Next JS y, para la autenticación, he usado un componente de orden superior para verificar el estado de autenticación automáticamente. Y mi código funciona bien localmente, pero cuando ejecuto npm run build, me da este error error Error: Component definition is missing display name react/display-name 6:27 Error: React Hook "useSession" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. react-hooks/rules-of-hooks
aquí está mi código en GitHub
Su problema se debe al nombre de Auth que se considera como un nombre de componente. Debe ser un nombre en mayúsculas y minúsculas como auth o withAuth .
Puedes comprobar la lógica a continuación.
import { useEffect } from "react" import { useRouter } from "next/router"; const withAuth = (Component: any) => { const {auth, loading} = useSession(); const router = useRouter(); useEffect(() => { console.log('use effect') if(!loading && !auth.auth) { router.push('/login') } }, [auth,loading]) const ComponentWrapper = (props: any) => auth.auth && <Component {...props} /> return <ComponentWrapper/> } export default withAuthUso en componentes
withAuth(Component)