CODEWITHSUNDEEP
reactjsnext.js
guest
guest

Reputation: 2234

How to use dynamic import in NextJS to import an SDK

I'm trying to use this WebcamSDK, which works in React but not NextJS

The SDK contains different exports that look like this

//@/component/sdk/WebcamSDK.js
export class Webcam {...}
export class Player {...}
export class Dom {...}

in my component I have:

//only load Webcam when there's a browser present
const WebcamAssets = dynamic(() => import("@/components/sdk/WebcamSDK"), {
  ssr: false
});
...
const Meeting = () => {
    useEffect(() => {
       ...
       const { Webcam, Player, Dom } = WebcamAssets; 
    })

}

The above code does not work, but when I do pure react import like this, it works fine

import { Webcam, Player, Dom } from "path/to/SDK/WebcamSDK"

Upvotes: 1

Views: 1512

Answers (1)

Max
Max

Reputation: 1844

NextJS 'next/dynamic' module is made for components.

Try await import():

const Meeting = async () => {
    useEffect(() => {
       ...
       const { Webcam, Player, Dom } = await import("@/components/sdk/WebcamSDK"); 
    })

}

Upvotes: 2

Related Questions