Typescript error when passing root prop to RecoilizeDebugger

[matiasmm]

Having problems setting up Recoilize in a Next.js app and typescript.

I get: Type '{ root: any; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. on this line:

      <RecoilizeDebugger root={root} />

The problem seems to be we are initiating root as null in this line:

  const [root, setRoot] = React.useState(null)

Here is the complete code: https://gist.github.com/matiasmm/1d87a1221e14345b1153d296e25e4bbc#file-_app-tsx-L27

Is there a workaround for this?

[samihamine]

Same problem here, any help please?

[safethecode]

Do you want to try it like this?

  const [root, setRoot] = useState<HTMLElement>();

  const RecoilizeDebugger = dynamic(
    () => {
      return import('recoilize');
    },
    { ssr: false },
  );

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

[imsukmin]

I fixed this error temporary. do typing in dyanmic dynamic<{root: HTMLElement | undefined}>

  const [root, setRoot] = useState<HTMLElement>()
  const RecoilizeDebugger = dynamic<{root: HTMLElement | undefined}>(
    () => import('recoilize'),
    {ssr: false},
  )

  useEffect(() => {
    if (typeof window.document !== 'undefined') {
      setRoot(document.querySelector('#__next') as HTMLElement)
    }
  }, [root])

[huraim]

This issue occurs when the root is not defined and the RecoilateDebugger is running Do you want to try it like this?

{root !== undefined && <RecoilizeDebugger root={root} />}

  const [root, setRoot] = useState<HTMLElement | undefined>();
  const RecoilizeDebugger = dynamic<{ root: HTMLElement | undefined }>(() => import('recoilize'), {
    ssr: false,
  });

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