Nextjs crashes on import webrtc_adaptor

[rajamarko]

Short description

Next js (page router) app crashes after importing @antmedia/webrtc_adaptor

Environment

• node v20.11.1
• next v14.2.3
• @antmedia/webrtc_adaptor v2.9.0

Steps to reproduce

1. npx create-next-app@latest (install with page router)
2. npm install @antmedia/webrtc_adaptor
3. in pages/index.js add import: import { WebRTCAdaptor } from '@antmedia/webrtc_adaptor';
4. npm run build

Logs

...ReferenceError: require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and '...path\test-ant-media\node_modules\@antmedia\webrtc_adaptor\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///...path/test-ant-media/node_modules/@antmedia/webrtc_adaptor/dist/index.js:3:22 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at async ModuleLoader.import (node:internal/modules/esm/loader:329:24) at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)

Build error occurred Error: Failed to collect page data for / at ...path\test-ant-media\node_modules\next\dist\build\utils.js:1268:15 { type: 'Error' }

[lastpeony]

I previously used ams js sdk and web player with next js. You need to disable SSR for it to work. Example:

Add "use client"; line to the head of your component where you import WebRTCAdaptor or Web Player

When you are importing the component where you are using WebRTCAdaptor or Web Player on a next.js page or component, import it with dynamic and disable ssr

import dynamic from "next/dynamic";
const VideoPlayerComponent = dynamic(
   () => import("../videoplayer/VideoPlayerComponent"),
   {
     ssr: false,
   }
 );

Please try like this. If it doesnt work let me know.

[rajamarko]

Thank you @lastpeony this actually works :)

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

But the error I posted above indicates an import mismatch inside @antmedia/webrtc_adaptor package, and dynamic import only masks the problem.

I did some digging and if you go to package: \node_modules\@antmedia\webrtc_adaptor\package.json and remove line 7:   - "type": "module"

Then the error from above is removed, you will still get an error where "window is not defined", but this is "normal" next js SSR stuff. (and you still have to use, 'use client' or dynamic )

[lastpeony]

@rajamarko happy to hear that it works Are there anything else you expect from AMS side or i will close the issue.