CODEWITHSUNDEEP
next.jslocalhostundefinedclient-sidevercel
SpoinkOC
SpoinkOC

Reputation: 33

NextJS project working on localhost but not on vercel

After being pretty satisficed with my little project on nextjs I've decided to give it a try on host. connected my git to Vercel and waited to see this disappointing result...

on localhost this run okay, with room for improvement but ok. but on Vercel...

anyway, on Vercel I get this error:

Application error: a client-side exception has occurred (see the browser console for more information).

which I do not get on localhost with same user logged in and same page being viewed. I managed to isolate the problem to this one component initialization:

```const FaucetForm = (props) => {
const { faucetInfo, userInfo } = props;
const router = useRouter();
const id = router.query;

const faucet = Object.values(faucetInfo).map((fau) => fau.routeName == id);
const [faucetpayEmail, setFaucetpayEmail] = useState();

useEffect(() => {
  try {
    const getit = userInfo.userInfo.faucetpayEmail;
    setFaucetpayEmail(getit);
  } catch {
      console.log('did not get it');
  }
}, [userInfo]);```

Provider:

```export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
  return auth.onIdTokenChanged(async (user) => {
    if (!user) {
      setUser(null);
      nookies.set(undefined, 'token', '', {});
      return;
    }
    const token = await user.getIdToken();
    setUser(user);
    nookies.set(undefined, 'token', token, {});
  });
}, []);
const [userInfo, setUserInfo] = useState('test');
useEffect(() => {
  userDB(user);
}, [user]);
const userDB = async (currentUser) => {
  if (!currentUser) return;
  const userUID = currentUser.email;
  const ref = await doc(firestore, 'users', userUID);
  const data = await getDoc(ref);
  const dataSet = await data;
  if (dataSet) {
    setUserInfo(dataSet.data());
  } else {
    setUserInfo(null);
    console.log('No such document!');      }
};
return (
  <AuthContext.Provider value={{ user: user, userInfo: userInfo }}>
    {children}
  </AuthContext.Provider>
); };
export const useAuth = () => useContext(AuthContext);```

before rendering im trying to see if the user is logged in by verifying userInfo is not null. in useEffect I'm trying to get his faucetpayEmail which is stored on firestore but I get it earlier and save to provider.

Here is the console output from vercel

from console.log at localhost I can see I get the right data Props

UPDATE: if it helps when you refresh the page you can see the correct info for a second before the error pops up which make me more suspicious at the useEffect. UPDATE2: then again its maybe connected to the dynamic routing cause it gives the same error as 404 idk anymore...

please let me know if any additional information is needed. Thank you!

Upvotes: 1

Views: 2558

Answers (1)

SpoinkOC
SpoinkOC

Reputation: 33

problem solved! 2 tiring days but its over.

modified the user info to get data directly from provider instead of global props.

  const { faucetInfo } = props;
  const userInfo = useAuth();
  console.log('userInfo', userInfo);

  const router = useRouter();
  const id = router.query;

  const faucet = Object.values(faucetInfo).map((fau) => fau.routeName == id);
  const [faucetpayEmail, setFaucetpayEmail] = useState();

  useEffect(() => {
    try {
      const getit = userInfo.userInfo.faucetpayEmail;
      setFaucetpayEmail(getit);
    } catch {
      console.log('did not get it');
    }
  }, [userInfo]);

Upvotes: 2

Related Questions