I have a Next JS application, and for authentication, I have used higher-order component to check auth status automatically. And my code works fine locally but when I run npm run build then it's giving me this 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
here is my code on GitHub
Your problem is due to Auth name which is considered as a component name. It should be a camel-cased name like auth or withAuth.
You can check the logic below
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 withAuth
Usage in components
withAuth(Component)