[Version 5] - Nextjs SSG/SSR not working due usage of window

[omridevk]

Window is undefined
emoji-mart/dist/index.js (1102:56)

[omridevk]

https://github.com/missive/emoji-mart/blob/5d04680c0503410752256ed1f744166ac48ee219/packages/emoji-mart/src/helpers/store.js

[omridevk]

can we disable localStorage?

[EtienneLem]

That’s most likely a compiler error, I doubt SSR can render custom HTML element which is why I didn’t think the presence of window would be an issue.

can we disable localStorage?

I don’t think that’s necessarily the issue here. The line that Next.js is complaining about is this one

emoji-mart/packages/emoji-mart/src/components/HTMLElement/HTMLElement.js

Line 1 in 5d04680

export default class HTMLElement extends window.HTMLElement {

I will make sure everything works with SSR.

[omridevk]

Thank you, I would suggest if possible, until then, update v3 to support React v18

[omridevk]

I also can't fix it by using useEffect as the usual solution for stuff like that.

[Leandro096]

I am having the same exact issue.

[EtienneLem]

Okay, that’s indeed as I thought. You need to defer the loading of the script so that it’s only loaded on the client side (and not the server). You can read more about that here: https://dev.to/swyx/how-to-use-web-components-with-next-js-and-typescript-4gg1

Here’s an example of how to import and use the lib with Next.js:

import { useEffect, useRef } from 'react'
import data from '@emoji-mart/data'

function Picker(props = {}) {
  const ref = useRef()

  useEffect(() => {
    import('emoji-mart').then((EmojiMart) => {
      new EmojiMart.Picker({ ...props, data, ref })
    })
  }, [])

  return <div ref={ref}></div>
}

[maltesa]

Thank you for the solution. It is a bit hard to find though. Maybe it would be worth mentioning it in the readme. I guess many people are using frameworks like nextjs that come with ssr out of the box.

[mfer-mickey]

i think so

[gabek]

With the above solution I'm receiving the error:

TypeError: Cannot read properties of undefined (reading 'version')

Does anybody have any ideas why I might be seeing that?

[amanzrx4]

Okay, that’s indeed as I thought. You need to defer the loading of the script so that it’s only loaded on the client side (and not the server). You can read more about that here: https://dev.to/swyx/how-to-use-web-components-with-next-js-and-typescript-4gg1

Here’s an example of how to import and use the lib with Next.js:

import { useEffect, useRef } from 'react'
import data from '@emoji-mart/data'

function Picker(props = {}) {
  const ref = useRef()

  useEffect(() => {
    import('emoji-mart').then((EmojiMart) => {
      new EmojiMart.Picker({ ...props, data, ref })
    })
  }, [])

  return <div ref={ref}></div>
}

hi, i tried this i rendered inside my component but it's rendered twice and again and again if the the controlled input in changes.

[everdrone]

Same problem as @amanzrx4

[gabek]

This is all disappointing, as I haven't been able to get it working either. If anybody has any suggestions on an Emoji picker component that supports custom emoji and works out of the box with React+Next please share your suggestions!

[austinbuckler]

was able to resolve this using dynamic imports and instantiating the Picker constructor in a ref callback function.

putting the picker in useEffect will trigger the effect twice in development mode when react strict-mode is enabled.

function EmojiPicker() {
    const pickerRef = useRef()
    const moduleRef = useRef()
    const handleDivRef = (divEl) => {
        pickerRef.current = divEl
        if (!moduleRef.current) {
            moduleRef.current = import('emoji-mart').then(m => new m.Picker({ ref: pickerRef, data: emojiData }))
        }
    }

    return <div ref={handleDivRef} />
}

@gabek @everdrone

[s0-david]

Any update on this?

[thienna]

any update?

[TusharShahi]

was able to resolve this using dynamic imports and instantiating the Picker constructor in a ref callback function.

putting the picker in useEffect will trigger the effect twice in development mode when react strict-mode is enabled.

function EmojiPicker() {
    const pickerRef = useRef()
    const moduleRef = useRef()
    const handleDivRef = (divEl) => {
        pickerRef.current = divEl
        if (!moduleRef.current) {
            moduleRef.current = import('emoji-mart').then(m => new m.Picker({ ref: pickerRef, data: emojiData }))
        }
    }

    return <div ref={handleDivRef} />
}

@gabek @everdrone

This works. Thanks a lot. But how do I pass props to handle theme and onClick event as defined in PickerProps?

[aamancio]

Another possible solution is doing this.

import { useEffect, useRef } from "react";
import data from "@emoji-mart/data";

export const EmojiPicker = (props: any) => {
  const ref = useRef<any>();
  const showEmojis = useRef(true);

  useEffect(() => {
    if (showEmojis.current) {
      showEmojis.current = false;
      import("emoji-mart").then((EmojiMart) => {
        new EmojiMart.Picker({ ...props, data, ref });
      });
    }
  }, [props]);

  return <div ref={ref}></div>;
};

[aamancio]

One of the things to be aware it seems that non of the methods is respecting customs styles.

[thiagosullivan]

Another possible solution is doing this.

import { useEffect, useRef } from "react";
import data from "@emoji-mart/data";

export const EmojiPicker = (props: any) => {
  const ref = useRef<any>();
  const showEmojis = useRef(true);

  useEffect(() => {
    if (showEmojis.current) {
      showEmojis.current = false;
      import("emoji-mart").then((EmojiMart) => {
        new EmojiMart.Picker({ ...props, data, ref });
      });
    }
  }, [props]);

  return <div ref={ref}></div>;
};

Thank for this solution! Works perfectly on my case!