Here is the issue:
useUser is failing during the npm run build the error given is:
React Hook “useUser” is called in function “members” that is neither a React function component nor a custom React Hook function
Here are the dependencies and versions of the application
"dependencies": {
"@auth0/nextjs-auth0": "^3.0.0",
"@prisma/client": "^5.0.0",
"@types/auth0": "^3.3.3",
"@types/node": "20.4.5",
"@types/react": "18.2.17",
"@types/react-dom": "18.2.7",
"@vercel/postgres": "^0.4.1",
"autoprefixer": "10.4.14",
"cloudinary-react": "^1.8.1",
"dotenv": "^16.3.1",
"eslint": "8.46.0",
"eslint-config-next": "13.4.12",
"next": "13.4.12",
"postcss": "8.4.27",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-intersection-observer": "^9.5.2",
"tailwindcss": "3.3.3",
"typescript": "5.1.6"
},
This is the part of the code where the build fails
import React from "react";
import { useUser } from "@auth0/nextjs-auth0/client";
import NavbarMembers from "@/components/navbar/navbar-members";
import Image from "next/image";
import Link from "next/link";
export default function members() {
const { user, error, isLoading } = useUser();
//let isLoading = false;
//let error = { message: "" };
//let user = { name: "Demo User", picture: "" };
if (isLoading) return <div>Loading...</div>;
if (error) return <div>{error.message}</div>;
if (user) {
let imageUrl;
if (user.picture) {
imageUrl = user.picture;
} else {
imageUrl =
"https://res.cloudinary.com/fbchb/image/upload/v1690661226/blankUserImage_ro3xp5.png";
}
return (
Any help is much apprecaited.
Thanks,
Glen