document is not defined about emoji-picker-react HOT 7 CLOSED

@eeeman1 are you using some SSR like Next.js or something like that? I believe the V3 doesn't support SSR. I'm having a problem with document is not defined too, but that's because Node.js doesn't have access to the DOM API as document for example. So every time your app renders though the backend you'll get this error.

P.S. If you are not using any SSR then ignore this comment 😅

from emoji-picker-react.

yeah getting this cuz of ssr. To turn of ssr use dynmaic~

import dynamic from "next/dynamic";
const NoSSRComponent = dynamic(() => import("../components/NoSSRComponent"), {
  ssr: false,
});

from emoji-picker-react.

Hey @eeeman1, your example is not sufficient for me to reproduce what you're describing. See this: https://stackblitz.com/edit/emoji-picker-react-gv9idx?file=index.js

Can you try to create a new blitz that reproduces your bug?

from emoji-picker-react.

@gasscoelho hey, in general, no, the picker does not support ssr - and I believe it also shouldn't for multiple reasons.

The technical reason it doesn't support ssr is due to the way css is handled. If you really need ssr support, you could probably grab the files directly from source, and configure transpiling of that module as well.

I would recommend, though, unless you really need the picker visible on initial load not to render it on the server, but instead show it later, or even better - dynamically import it later on. It is a pretty heavy component with lots of assets, and thousands of elements. It also runs a pretty intense mapping of search keywords right at start.

from emoji-picker-react.

#184 (comment)

from emoji-picker-react.

use dynamic import in nextjs it just because of serverside rendering

from emoji-picker-react.

closing as duplicate of #184

from emoji-picker-react.