ealush / emoji-picker-react

The most popular React Emoji Picker
https://ealush.com/emoji-picker-react/
MIT License
1.07k stars 175 forks source link

document is not defined in SSR (nextJs) #184

Open rakibpaucse opened 3 years ago

rakibpaucse commented 3 years ago

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

ohasy commented 3 years ago
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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

kedarguy commented 3 years ago

This works:

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

This works:

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

Yeah, It's also worked for me.

codedthemes commented 2 years ago

Any update on this? About giving patch or something?

Twonarly1 commented 2 years ago

This works:

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

Works for me!

mssoo7 commented 2 years ago

Thanks

diegoalzate commented 2 years ago

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 commented 2 years ago

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.