Next.js 10客户端动态导入trtc-js-sdk报错求助

错误原因分析 #

1. 第一个错误TRTC.createClient is not a constructor：
   • 误用next/dynamic导入非React组件的SDK库，且错误指定了导出名称NamedExport——trtc-js-sdk实际是默认导出TRTC对象，并非命名导出。另外next/dynamic核心作用是动态加载React组件，而非工具类SDK。
2. 第二个错误TypeError: Cannot read property 'then' of undefined：
   • 嵌套动态导入写法存在语法错误：x.js中dynamic的回调函数未返回import("./test_y")的Promise，且test_y.js中重复使用dynamic属于多余操作。

正确实现方式（客户端无SSR加载） #

Next.js中useEffect仅在客户端执行，不会触发SSR，推荐结合useEffect和原生动态import加载SDK：

import { useEffect, useState } from 'react';

function TRTCComponent() {
  const [TRTC, setTRTC] = useState(null);

  useEffect(() => {
    // 仅在客户端加载SDK，避免SSR阶段执行
    import('trtc-js-sdk').then(module => {
      // 取SDK的默认导出对象
      setTRTC(module.default);
    });
  }, []);

  // 等待SDK加载完成再执行逻辑
  if (!TRTC) {
    return <div>加载TRTC SDK中...</div>;
  }

  // 正常使用SDK方法
  const client = TRTC.createClient({
    mode: 'rtc',
    sdkAppId: 你的SDKAppID
  });

  // 后续业务逻辑...

  return <div>TRTC SDK已加载完成</div>;
}

export default TRTCComponent;

备选方案（用next/dynamic封装组件） #

如果一定要用next/dynamic，可以封装一个仅在客户端加载SDK的组件：

// trtc-provider.js
import { useEffect, useState, createContext, useContext } from 'react';

const TRTCContext = createContext(null);

export function TRTCProvider({ children }) {
  const [TRTC, setTRTC] = useState(null);

  useEffect(() => {
    import('trtc-js-sdk').then(module => setTRTC(module.default));
  }, []);

  return (
    <TRTCContext.Provider value={TRTC}>
      {TRTC ? children : <div>加载中...</div>}
    </TRTCContext.Provider>
  );
}

export function useTRTC() {
  return useContext(TRTCContext);
}

在页面中动态导入这个Provider组件（关闭SSR）：

import dynamic from 'next/dynamic';

const TRTCProvider = dynamic(() => import('./trtc-provider').then(m => m.TRTCProvider), {
  ssr: false
});

function MyPage() {
  return (
    <TRTCProvider>
      {/* 子组件中可以通过useTRTC()获取SDK对象 */}
    </TRTCProvider>
  );
}

export default MyPage;

内容的提问来源于stack exchange，提问作者ghost