reactjstypescriptnext.js

Unhandled Runtime Error TypeError: Class constructor $b802fbb11c9bd2dc$export$2e2bcd8739ae039 cannot be invoked without 'new'


I am trying to use emoji-mart in my app but I keep getting this error Here's my code

import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'

 {showEmojis && (
                
                <Picker 
                   data={data}
                   onEmojiSelect={addEmoji}
                   style={{
                    position:"absolute",
                    marginTop: "465px",
                    marginLeft: -40,
                    maxWidth: "320px",
                    borderRadius: "20px",
                  }}
                  theme="dark"
                  />
              )}

error image


Solution

  • You have imported Picker from wrong location.

    Official Docs: https://github.com/missive/emoji-mart#react

    STEP 1:

    npm install --save emoji-mart @emoji-mart/data @emoji-mart/react
    

    STEP 2:

    import data from '@emoji-mart/data'
    import Picker from '@emoji-mart/react'
    

    STEP 3:

    {showEmojis && (
                    
                    <Picker 
                       data={data}
                       onEmojiSelect={addEmoji}
                       style={{
                        position:"absolute",
                        marginTop: "465px",
                        marginLeft: -40,
                        maxWidth: "320px",
                        borderRadius: "20px",
                      }}
                      theme="dark"
                      />
                  )}