I keep getting an error when trying to run npm run build on my next.js project

Question

Whenever I try to run npm run build for my project I get the error: Cannot read properties of undefined (reading 'email'). I understand it means that the email cannot be undefined, but I am unsure where it means, the code for the page it is reffering to is pasted below:

import { auth } from "@/firebase";
import { signOut, User } from "firebase/auth";
import { PrettyChatWindow } from "react-chat-engine-pretty";

interface ChatProps {
  user: User;
}

export default function Page(props: ChatProps) {
  return (
    <div style={{ height: "100vh" }}>
      <button
        style={{ position: "absolute", top: "0px", left: "0px" }}
        onClick={() => signOut(auth)}
      >
        Sign Out
      </button>
      <PrettyChatWindow
        projectId="This is the ID I use for chatengine"
        username={props.user.email || "[email protected]"}
        secret={props.user.uid}
        style={{ height: "100%" }}
      />
    </div>
  );
}

I have tried searching online for a fix, but have not found any fix yet, any help would be appreciated.

Answer 1

I think it's saying that the user is undefined. You could put props.user?.email to check if the user exists before it tries to key into the user object. You should also do it for the id props.user?.uid.

<PrettyChatWindow
  projectId="This is the ID I use for chatengine"
  username={props.user?.email || "[email protected]"}
  secret={props.user?.uid}
  style={{ height: "100%" }}
/>

There may be a problem with how your passing in the user prop, it doesn't seem to be receiving it.