No errors displayed in Nextjs

Issue

I have a large create-react-app project, which I am trying to migrate over to NextJS. I started a new Next project using create-next-app and I'm copying all the files over one by one. The main part of my page is being client-side rendered, since I have a lot of interactive UX. For this I'm using this code I found online:

export default dynamic(
    () => import('../../../components/ProjectEditorPage/ProjectEditorPage'),
    { ssr: false }
)

This code works, because sometimes the page is rendered. My problem is there are no errors displayed when they happen, the page just goes white. There is also nothing displayed in the command line or in the dev tools console. If I try to use basic server-side rendering, I get the following error without any further information, location, component or file name:

error - Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

I understand this error. I'm just not able to find it in my project since there is no more information displayed. Is my NextJS setup wrong? Why am I getting way less error information compared to using React? In React the error is always pretty clearly specified.

Solution

I temporarly fixed the problem by implementing the following hook:

// useIsBrowser.ts

const useIsBrowser = () => 
{
    const [ isBrowser, setIsBrowser ] = useState(false);

    useEffect(() =>
    {
        // this hook only runs inside of the browser
        setIsBrowser(true);
    }, []);

    return isBrowser;
}

export default useIsBrowser;

...which can then be used the following way...

    // inside some react component
    const isBrowser = useIsBrowser();

    if (!isBrowser) return null;

I'm still getting an error from NextJs saying it found a difference between the SSR and CSR page. I will be working on removing that error in the future, since it isn't that much of a problem.

Answered By - dogefromage