【Bug Report】"Emoji" component is not working for Next.js

Problem

When “Emoji” Component use with Next.js (SSR), the Error has been occurred like below.

Unhandled Runtime Error TypeError: Class constructor $8b28a44b07620e42$export$2e2bcd8739ae039 cannot be invoked without ‘new’

const Emoji = dynamic<EmojiProps>(
  () => import("emoji-mart").then((m) => m.Emoji),
  {
    ssr: false,
  }
);

export const Foo = () => {
  return (
    <Emoji emoji={"thinking_face"} size={64} />
  );
};

Reference

However, “Picker” component is available for Next.js

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

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

  return <div ref={ref}/>
}

Example code is here. https://github.com/missive/emoji-mart/issues/575#issuecomment-1111323710

Environment

- next v12.1.6
- Node.js v14.19.0
- TypeScript v4.7.3

[321ckatz123]

Any update on using Emoji directly in React in next (FWIW, this is the same error without using Next.js. Just referencing the Emoji component in React throws the same error).

If we are no longer supposed to use it (looking at the examples, seems like it), can we get an example of the “correct” way to use Emoji inside React?

[321ckatz123]

@EtienneLem FWIW, for your answer to 2, you are describing a relatively common pattern in React that follows the Provider pattern using the internal context library.

To be honest, I kind of have to make it all work in React and your answer to 1 means that I can follow that pattern. Are you amenable to me creating a PR that creates the Provider, Picker, and Emoji React component within this repo?

Also, while I am not the OP, I think this issue can be closed. While yes, this does explode when trying to use it this way, this is a known and expected part of the v5 upgrade and we have answered how to solve it.