如何在NextJS中使用dynamic import导入兼容React的WebcamSDK

安全阿岳

2026-9-28

解决方案

问题根源

next/dynamic 是专门用来动态导入React组件的API，不支持导入普通ES模块（你这里的SDK是导出三个类的普通模块），所以你之前的写法无法拿到正确的导出对象。

推荐解决方法：直接在useEffect中使用原生动态导入

useEffect本身仅在客户端（浏览器环境）执行，直接搭配原生ES动态导入import()即可满足「仅浏览器加载SDK」的需求，不需要使用next/dynamic：

// 删除之前的WebcamAssets = dynamic(...) 相关代码
const Meeting = () => {
  useEffect(() => {
    const initWebcam = async () => {
      // 原生动态导入返回Promise，await后即可拿到模块导出内容
      const { Webcam, Player, Dom } = await import("@/components/sdk/WebcamSDK");
      // 此处编写SDK调用逻辑
      // const webcam = new Webcam(...)
    };
    initWebcam();
  }, []);
  // ...组件其他逻辑
}

备选方案：封装为组件后使用next/dynamic

如果你希望用next/dynamic实现，需要先把SDK的调用逻辑封装为独立的React组件，再动态导入该组件：

封装Webcam相关组件：

// @/components/WebcamRunner.js
import { Webcam, Player, Dom } from "@/components/sdk/WebcamSDK";

export default function WebcamRunner() {
  // 此处编写所有SDK相关逻辑
  useEffect(() => {
    // ...初始化逻辑
  }, []);
  return <div>{/* 播放器等相关UI */}</div>
}

在Meeting组件中动态导入该组件：

import dynamic from "next/dynamic";
// 动态导入组件，关闭ssr
const WebcamRunner = dynamic(() => import("@/components/WebcamRunner"), {
  ssr: false
});

const Meeting = () => {
  return (
    <div>
      {/* 直接使用组件即可，只会在客户端渲染加载 */}
      <WebcamRunner />
    </div>
  )
}