How to use dynamic import in NextJS to import an SDK

Question

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"

Answer 1

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

Try await import() :

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

}