Runtime error says `D.latestVersion is not a function` in production build by Next.js 13 App Router.

[Innei]

In the prod build, I can't open the emoji picker, and it throws an error. The information is below.

module.js:781 Uncaught (in promise) TypeError: D.latestVersion is not a function
    at Q (module.js:781:1)
    at Z (module.js:728:1)
    at eQ.connectedCallback (module.js:2918:1)
    at new ep (module.js:1296:1)
    at new ef (module.js:1316:1)
    at new eQ (module.js:2925:1)
    at EmojiPicker.tsx:28:9

The source trace is:

And my code wrote:

({ onEmojiSelect }) => {
  const { data, isLoading } = useQuery({
    queryKey: ['emoji-data'],
    queryFn: () =>
      fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data', {
        next: {
          revalidate: 60 * 60 * 24 * 7,
        },
      }).then((response) => response.json()),

    staleTime: Number.POSITIVE_INFINITY,
  })
  const handleSelect = useCallback((emoji: any) => {
    return onEmojiSelect(emoji.native)
  }, [])

  const handleDivRef = (divEl: HTMLDivElement) => {
    import('emoji-mart').then(
      (m) =>
        new m.Picker({
          ref: {
            current: divEl,
          },
          data,
          onEmojiSelect: handleSelect,
          maxFrequentRows: 0,
        }),
    )
  }

  if (isLoading)
    return (
      <Loading className="flex h-[435px] w-[352px] rounded-md bg-slate-100 center dark:bg-neutral-800" />
    )

  return (
    <div className="w-[352px]">
      <div ref={handleDivRef} />
    </div>
  )
}

That's not work.

And uses emoji-mart/react like this:

(({ onEmojiSelect }) => {
  const { data, isLoading } = useQuery({
    queryKey: ['emojidata'],
    queryFn: () =>
      fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data', {
        next: {
          revalidate: 60 * 60 * 24 * 7,
        },
      }).then((response) => response.json()),

    staleTime: Infinity,
  })
  const handleSelect = useCallback((emoji: any) => {
    return onEmojiSelect(emoji.native)
  }, [])
  if (isLoading) return <Loading className="w-[352px]" />

  return <Picker data={data} onEmojiSelect={handleSelect} />
})

Also not work in prod.

[kirkegaard]

I have the same issue and created a basic sandbox of whats going on https://codesandbox.io/p/sandbox/elated-lake-m6hgwd

It seems to only break in production builds when used with nextjs

[Alex-ray]

I'm encountering the same issue with "next": "13.4.10" and "emoji-mart": "^5.5.2"

[hoseinkord]

I'm encountering the same issue with "next": "13.2.4" and "emoji-mart": "^5.5.2"

Uncaught (in promise) TypeError: O.latestVersion is not a function

[Bravemobin]

I have Error too on "next:"13.4.8" and "emoji-mart": "^5.5.2"

[milo-]

Also seeing the same thing

[Xhale1]

Saw the same thing when upgrading to next 13.4.9 in the traditional pages router (not the new app router)

Tagging @EtienneLem to hopefully get some eyes here

[hoseinkord]

@EtienneLem

[milo-]

As a workaround I've disabled swcMinify in my next.config.js and this error no longer happens.

Looks like this might be a bug with SWC Minifier, rather than emoji-mart.

[Alex-ray]

I'm also using the traditional pages router

[stevenaanen]

Same issue after upgrading React this week - only in production. Latest version of both React & emoji-mart, using pages router 😢

[donaldboulton]

You might try dynamic imports, so it will not be bundled. Like. ` import dynamic from 'next/dynamic'

const Picker = dynamic( () => import('emoji-mart'), { ssr: false } )`

at : NextJs Dynamic import

[stevenaanen]

You might try dynamic imports, so it will not be bundled. Like. ` import dynamic from 'next/dynamic'

const Picker = dynamic( () => import('emoji-mart'), { ssr: false } )`

at : NextJs Dynamic import

Tried this solution, not working for me, same result. :(

[tehseenc]

I got it to work with the following (kind of hacky) steps (not sure if any of these are unnecessary).

First I tried adding swcMinify: false into my next.config.js but it did not work, then I removed that and tried the dynamic import for my Picker, this did not work either.

Finally I

1. Swapped out my init({data}) method at the top of my files to get the data, and instead used this method found in one of the sandboxes provided in this thread: ` data={async () => { const response = await fetch( "https://cdn.jsdelivr.net/npm/@emoji-mart/data/sets/14/native.json" );

   return response.json(); }}`

2. Then i swapped to using dynamic imports mentioned above. It causes a lag in loading it, especially if its a dropdown so I added this hacky solution to the top of my return in my react components, this way it loads before the drop down opens and does not lag: <div className="hidden"> <Picker /> </div>

3. I added back the swcMinify: false to my next app and this got it working again! I don't know if one of these steps is unnecessary but it's working for now.

[luantrasel]

Just adding swcMinify: false on next.config.js as @tehseenc mentioned fixed the problem

[LoryPelli]

Just adding swcMinify: false on next.config.js as @tehseenc mentioned fixed the problem

It didn't worked for me Edit: it works

[koniz-dev]

Just adding swcMinify: false on next.config.js as @tehseenc mentioned fixed the problem

I used it but it still didn't help much. Please help me.

[brandalx]

same

[PopDaph]

Hi 👋🏻 What fixed it for me is bumping to "next": "^13.5.4".

[sirreal]

This was caused by a problem in @swc/core that was fixed in version 1.3.72.

Issue: https://github.com/swc-project/swc/pull/7702

If you're using SWC, make sure you're on a recent version of @swc/core with a command like:

yarn up -R @swc/core

[Frying7415]

Same issue for me. Runtime TypeError: O.latestVersion is not a function. Next.js 13.4.10, emoji-mart 5.5.2 Not using SWC, so the swcMinify: false fix did nothing to help. Would be grateful for any help with this issue.

[princebhandarii]

thanks a lot bro @tehseenc that solution is worked 🤙🏻