Error in NextJS Production, no error in dev

[lpbonomi]

This is the error I get:

11:53:52:111 Agora-SDK [INFO]: browser compatibility {"getDisplayMedia":true,"getStreamFromExtension":true,"supportUnifiedPlan":true,"supportMinBitrate":true,"supportSetRtpSenderParameters":true,"supportDualStream":true,"webAudioMediaStreamDest":true,"supportReplaceTrack":true,"supportWebGL":true,"webAudioWithAEC":false,"supportRequestFrame":true,"supportShareAudio":true,"supportDualStreamEncoding":false,"supportDataChannel":true,"supportPCSetConfiguration":true,"supportWebRTCEncodedTransform":true,"supportWebRTCInsertableStream":true} {"name":"Chrome","version":"123","os":"Mac OS","osVersion":"10.15.7"}
app-index.tsx:25 TypeError: r is not a function
    at t.exports (index.js:8:58768)
    at index.js:8:58832
    at $a (index.js:8:5850)
    at index.js:8:58520
    at index.js:8:81
    at 8734 (index.js:8:215)
    at d (bootstrap:21:1)
    at 3931 (index.modern.js:445:16)
    at Function.d (bootstrap:21:1)
window.console.error @ app-index.tsx:25

And this is my code

'use client';

import dynamic from 'next/dynamic';
import { useState } from "react";
let AgoraUIKit = dynamic(() => import('agora-react-uikit'), { ssr: false });

type Role = "audience" | "host" | null

export default function Home() {
  const [role, setRole] = useState<Role>();

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {AgoraUIKit && role ?
         <AgoraUIKit rtcProps={{
          appId: "",
          channel: "test",
          token: null,
          role: role,
      }}
      styleProps={{
        UIKitContainer:{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          backgroundColor: '#f0f0f0',
        }
      }}
         /> : (
          <div>
            <button onClick={() => setRole("host")}>Join as Host</button>
            <br></br>
            <button onClick={() => setRole("audience")}>Join as Audience</button>
          </div>
         )
      }
    </main>
  );
}

[shafiqistaken]

Also facing same issue. Is there any update? @lpbonomi did you solve it?

[lpbonomi]

Hi, I ended up using another tool

[KamalSinghKhanna]

Facing the same issue, anyone solved it?

[KamalSinghKhanna]

I was able to work around UI kit by downgrading the Next.js to 14.1.4 version.