Now I’m building the application using React.js. All pages are working excepting of auth page. After logging successfully, it should bring the user to the home page but it was broken, and showed the blank page. After refreshing the manually, it started to show the home page.
When I checked the application thru development tools in the chrome browser, it says "Uncaught TypeError: destroy is not a function".
I attached the code where caused the error.
...
const UnauthedWrapper = () => {
const navigate = useNavigate();
const location = useLocation();
const {
state: { auth, user },
} = useContext(AppContext);
useEffect(() => {
if (auth && user && user.emailVerified && user.dstoreName) {
navigate(`/app/overview`);
return null;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [auth, user]);
return (
<>
{!location.pathname.includes("/auth") ? (
<Header
logo="/images/logo.png"
page="landing"
hideLogin={process.env.REACT_APP_ENV === "PROD"}
/>
) : (
<Link to="/">
<img
src="/images/logo.png"
alt="logo"
className="logo ms-4 mt-4"
width={180}
/>
</Link>
)}
...
>Solution :
It turns out this almost always happens when you try to return anything from your useEffect hook that is not a function.
- Why Doesn’t This Work?
If you return anything from a useEffect function, it must be a function.
useEffect(() => {
if (auth && user && user.emailVerified && user.dstoreName) {
navigate(`/app/overview`);
return null;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [auth, user]);
- The Quick Solution
- Remove the unnecessary return.
useEffect(() => {
if (auth && user && user.emailVerified && user.dstoreName) {
navigate(`/app/overview`);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [auth, user]);
- Make sure it has function.
useEffect(() => {
if (auth && user && user.emailVerified && user.dstoreName) {
navigate(`/app/overview`);
return () => {}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [auth, user]);