How to use dynamic import in NextJS to import an SDK-CodePudding

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"

CodePudding user response：

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

Try await import():

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

}