React UseEffect works locally but not In production Netlify-CodePudding

I have an url to confirm the account of my users, with a token in the url, after you enter into the page it should print you a message "User is now active" or "Token is not valid". In localhost it works perfect, but now in netlify it render the website but it does show any message either make any request to the server. Also It does not give me any type of error neither on the server nor on the frontend console.

here is the website link: https://cozy-melomakarona-5853fa.netlify.app/confirm-account/1g52cb94j2rke4pdlgl

my only suspicion is that the useEffect hook is not working in netlify.

import React, { useEffect, useState } from 'react'
import {useParams, Link} from "react-router-dom"
import Alert from '../components/Alert.jsx';

function Confirm() {

  const params = useParams();
  const {token} = params;
  const url = `${import.meta.env.VITE_BACKEND_URL}/api/veterinaries/confirm-account/${token}`;
  
  const [alert, setAlert] = useState({});
  const [confirmedAccount, setConfirmedAccount] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const confirmAccount = async ()=> {
      try {
        
        const response = await fetch(url);
        const result = await response.json();
        if (!response.ok){ //here we check if there is an error from the backend and we generate a new error with the message from backend
          throw new Error(result.msg);
        }
        
        //if everything is ok then
        setConfirmedAccount(true)
        setAlert({msg: result.msg, error1: false})
        
      } catch (error) {
        setAlert({msg: error.message, error1: true}) //here we show the backend error on the frontend
      }
      //stop loading
      setLoading(false);
    }
    
    return () => {
      confirmAccount();
    }
  }, [])
  


  const {msg} = alert;
  return (
    <>
      <div>
        <h1 className="text-indigo-600 font-black text-5xl text-center capitalize mr-6">
          Verify your account and <span className="text-black">manage your patients</span></h1>
      </div>
      <div className="shadow-lg rounded-xl bg-white px-5 py-10">
        {/* if it is not loading then show alert*/}
        {!loading ? <Alert alert={alert}/> : null }

         {/* if the account is confirmed then show sign in link*/}
        {confirmedAccount && <Link to="/" className="text-blue-600 block text-lg text-center mt-4">Sign in!</Link>}
      </div>
      
    </>
  )
}

export default Confirm

CodePudding user response：

The way you are using useEffect is not the expected, return statement is unnecessary, instead you need to call your function confirmAccount, this should fix the issue:

const confirmAccount = async () => {
  try {
    const response = await fetch(url);
    const result = await response.json();
    if (!response.ok) {
      //here we check if there is an error from the backend and we generate a new error with the message from backend
      throw new Error(result.msg);
    }

    //if everything is ok then
    setConfirmedAccount(true);
    setAlert({ msg: result.msg, error1: false });
  } catch (error) {
    setAlert({ msg: error.message, error1: true }); //here we show the backend error on the frontend
  }
  //stop loading
  setLoading(false);
};

useEffect(() => {
  confirmAccount();
}, []);