_app.tsx

import * as React from "react"
import dynamic from 'next/dynamic';

import { RecoilRoot } from "recoil";
import "../styles/globals.css"


function MyApp({ Component, pageProps }): JSX.Element {

  const [root, setRoot] = React.useState(null)
  const RecoilizeDebugger = dynamic(
    () => {
      return import('recoilize');
    },
    { ssr: false }
  );

  React.useEffect(() => {

    if (typeof window.document !== 'undefined') {
      setRoot(document.getElementById('__next'));
    }
  }, [root]);

  return (
    <RecoilRoot>
      <RecoilizeDebugger root={root} />   // <- error here
      <Component {...pageProps} />
    </RecoilRoot>
  )
}

export default MyApp