document is not defined in SSR (nextJs)

[rakibpaucse]

I am getting ReferenceError: document is not defined error even when I import Picker this only. Dont you have SSR support in V3 ?

[ohasy]

import dynamic from "next/dynamic";
import { IEmojiPickerProps } from "emoji-picker-react";
const EmojiPickerNoSSRWrapper = dynamic<IEmojiPickerProps>(
  () => import("emoji-picker-react"),
  {
    ssr: false,
    loading: () => <p>Loading ...</p>,
  }
);

[namansukhwani]

this didn't worked

import dynamic from "next/dynamic";
import { IEmojiPickerProps } from "emoji-picker-react";
const EmojiPickerNoSSRWrapper = dynamic<IEmojiPickerProps>(
  () => import("emoji-picker-react"),
  {
    ssr: false,
    loading: () => <p>Loading ...</p>,
  }
);

[matheusslg]

Another workaround for this is to use the vanilla dynamic importation like this:

let Picker;
if (typeof window !== 'undefined') {
  import('emoji-picker-react').then(_module => {
    Picker = _module.default;
  });
}

[Chukstart]

I'm also getting this error now and again what could be the remedy for this issue

[kedarguy]

This works:

import dynamic from 'next/dynamic';
const Picker = dynamic(() => import('emoji-picker-react'), { ssr: false });

[Rayhan926]

This works:

import dynamic from 'next/dynamic';
const Picker = dynamic(() => import('emoji-picker-react'), { ssr: false });

Yeah, It's also worked for me.

[codedthemes]

Any update on this? About giving patch or something?

[Twonarly1]

This works:

import dynamic from 'next/dynamic';
const Picker = dynamic(() => import('emoji-picker-react'), { ssr: false });

Works for me!

[mssoo7]

Thanks

[diegoalzate]

This works:

import dynamic from 'next/dynamic';
const Picker = dynamic(() => import('emoji-picker-react'), { ssr: false });

Works for me!

When i try to build, it still throws the same error ReferenceError: document is not defined

[shanesc]

Another workaround for this is to use the vanilla dynamic importation like this:

let Picker;
if (typeof window !== 'undefined') {
  import('emoji-picker-react').then(_module => {
    Picker = _module.default;
  });
}

This worked for me. We're not using Next, but seems like it should work for any SSR/Node environment.