emoji-mart: 【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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 21 (5 by maintainers)

Most upvoted comments

It says “Property ‘em-emoji’ does not exist on type ‘JSX.IntrinsicElements’” on next.js. How do I fix this warning?

I added the following to .d.ts to work this around. Not sure whether that was a good idea to use web component in JSX:

import * as React from "react";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "em-emoji": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      > & {
        id?: string;
        shortcodes?: string;
        native?: string;
        size?: string | number;
        fallback?: string;
        set?: "native" | "apple" | "facebook" | "google" | "twitter";
        skin?: string | number;
      };
    }
  }

kuzzmi on Nov 18, 2022

It says “Property ‘em-emoji’ does not exist on type ‘JSX.IntrinsicElements’” on next.js. How do I fix this warning?

arclogos132 on Oct 5, 2022

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 on Jun 21, 2022

@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.

321ckatz123 on Jun 23, 2022

@austinbuckler Thank you for your reply ! I saw your comment, I understand “Picker” component is able to use dynamic import and ref callback function.

So…, I want to know, how to display “Emoji” component, by use of dynamic import and ref callback function. Could you give me some example?

I can take a look sometime tonight/this week. I don’t have a use-case for the Emoji component, I didn’t know such a thing existed.

austinbuckler on Jun 7, 2022

@saurabhmehta1601 Thanks! I could understand usecase !

kazuki-komori on Jun 18, 2022

@saurabhmehta1601 Thanx ! By the way, do you know how to use Emoji component ?

kazuki-komori on Jun 15, 2022

I am using Picker in Nextjs . This method works fine .

EmojiPicker.jsx

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

const EmojiPicker = (props) => {
  const ref = useRef(null);

  useEffect(() => {
    new Picker({ ...props, data, ref });
  }, []);

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

export default EmojiPicker;

The file where you want to use EmojiPicker component .

Page.jsx

import React from "react"
import dynamic from "next/dynamic"

const EmojiPicker = dynamic(() => import("./EmojiPicker"), {
  ssr: false,
});

const Page = () => {
  return <EmojiPicker />
}

export default Page

saurabhmehta1601 on Jun 10, 2022

@austinbuckler Thank you for your reply ! I saw your comment, I understand “Picker” component is able to use dynamic import and ref callback function.

So…, I want to know, how to display “Emoji” component, by use of dynamic import and ref callback function. Could you give me some example?

kazuki-komori on Jun 6, 2022