如何在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; 
})
}

上面的代码不能工作，但是当我像这样做纯react导入时，它工作得很好

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

Answer 1

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

Tryawait import():

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