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

}