如何在 NextJS 中使用动态导入来导入 SDK

Question

我正在尝试使用这个 WebcamSDK，它适用于 React 但不适用于 NextJS

SDK 包含不同的导出，如下所示

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

在我的组件中，我有：

//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; 
    })

}

上面的代码不起作用，但是当我像这样进行纯反应导入时，它工作正常

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

Answer 1

NextJS 'next/dynamic' 模块是为组件制作的。

尝试await import() ：

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

}