1

I am trying to implement "agora-rtc-sdk-ng" package for live streaming using next.js and typescript.

import AgoraRTC from 'agora-rtc-sdk-ng';

Import of this will throw me an error like as below:

enter image description here

As per other stackoverflow answer, I tried to use the next/dynmaic. But no luck. Please help me if anybody has use "agora-rtc-sdk-ng" in next.js.

Shivani Sonagara
  • 1,299
  • 9
  • 21
  • Where are you importing the `AgoraRTC`? My guess here is you are mixing server-side code somewhere in `getStaticProps` or `getStaticPaths` with client-side code which is trying to access the `window` object. Please add minimal code showing the usage of the imports. Also you cannot access `window` object in those serverside methods mentioned above. – KeshavDulal Dec 02 '21 at 10:28
  • Yes, I am trying to import the package on-page file directly. What can be a possible way to import and use the window object? – Shivani Sonagara Dec 02 '21 at 11:34
  • Theoretically, you might be trying to access the `window` object while your code is running "serverside" i.e. you might be calling a function in `getStaticProps` or `getStaticPaths` which in turn relies on the window object. It could be from agora, I am not sure. I am not familiar with that package. Also, You might already know this but, just for the sake of completeness, nextjs runs both on "server-side" and "browser-side". When it is running on "server-side" you can use node or server specific packages like `fs`, `path` etc but cannot use or access `window` object & vice-versa. – KeshavDulal Dec 02 '21 at 15:07
  • Does this answer your question: [Why am I getting ReferenceError: self is not defined when I import a client-side library?](https://stackoverflow.com/a/66100185/1870780)? Use a regular dynamic import instead. `next/dynamic` is used for React components only. – juliomalves Dec 03 '21 at 19:17

1 Answers1

1

You can use a dynamic import like so:

import dynamic from 'next/dynamic'

const App = dynamic(import('./Videocall'), { ssr: false });

The Videocall component can then use the SDK.

Ekaansh Arora
  • 1,168
  • 6
  • 15