MediaRecorder is not defined

Sendbird Chat UIKit
1

[Problem/Question]
Error occurred prerendering page “/chat”. Read more: Prerender Error | Next.js
ReferenceError: MediaRecorder is not defined
at /vercel/path0/.next/server/app/(root)/(user)/chat/page.js:99:206060
at Array.find ()
at py (/vercel/path0/.next/server/app/(root)/(user)/chat/page.js:99:206043)
at nP (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:45321)
at n$ (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61978)

// If problem, please fill out the below. If question, please delete.
[UIKit Version]
“@sendbird/uikit-react”: “^3.14.7”,
“next”: “^14.2.3”,

[Current impact]
only gives error in production build works in localhost

2

I ran into the same thing. I am not sure how you’ve set up the page, but it appears to be related to the availability of the window object and being exclusively client side. If you lazy load it, it seems to go away; I had the error, and now I can see what I expect ( really basic example, obviously you’d wanna use environment variables and such):

import { useUser } from "@your-database-package";
import dynamic from "next/dynamic";

const SendbirdApp = dynamic(() => import("@sendbird/uikit-react/App"), {
  ssr: false,
});

import "@sendbird/uikit-react/dist/index.css";
import { useEffect } from "react";

const APP_ID = "OOICU812";
const SendbirdAppIntegration = () => {
  const user = useUser();

  return (
    <div className="app-container">
      <SendbirdApp appId={APP_ID} userId={user?.id} />
    </div>
  );
};

export default SendbirdAppIntegration;