When I try to use my protected.tsx file on a page, I encounter an error message stating:
Server Error
Error: Attempted to call the default export of protected.tsx from the server, but it should only be used on the client side. Invoking a client function from the server is not possible; it can only be rendered as a component or passed as props to a client-side component.
'use client';
import React from 'react';
import { useUser } from '../context/user';
import { useRouter } from 'next/navigation';
interface ProtectedProps {}
const withProtected = (WrappedComponent: React.ComponentType<ProtectedProps>) => {
const WithProtected: React.FC<ProtectedProps> = (props) => {
const router = useRouter();
const user = useUser();
const { uid } = user;
if (typeof window === 'undefined') {
return null;
}
console.log({ uid });
if (!uid) {
router.replace('/');
return <></>;
}
return <WrappedComponent {...props} />;
};
return WithProtected;
};
export default withProtected;
The code snippet below is from the page that is causing the error:
import React from 'react';
import withProtected from '../hoc/withProtected';
const StorePage: React.FC = () => {
return (
<div>
<h2>Diecast Page</h2>
</div>
);
};
export default withProtected(StorePage);
If anyone can help me solve this issue, I would greatly appreciate it. Thank you!