Next.js中PeerJs导入报错及动态导入异常问题求助

错误原因 #

PeerJS初始化时依赖浏览器环境的navigator对象，但Next.js的SSR阶段运行在服务器端，不存在该对象，直接导入会触发报错。你之前的两种方式问题出在：

• 用next/dynamic导入PeerJS：dynamic是Next.js专门用来懒加载React组件的工具，而非普通JS库，所以会被误识别为JSX组件。
• 顶层使用await import：如果在组件顶层执行这段代码，SSR阶段服务器会尝试运行它，依然会因缺少navigator报错。

正确解决方案 #

方案1：在客户端组件中通过useEffect动态加载（Next.js 13+ App Router）

给组件添加'use client'指令标记为客户端组件，然后在useEffect中完成PeerJS的动态导入，确保代码仅在浏览器环境执行：

'use client';

import { useEffect, useState } from 'react';

export default function PeerConnectionComponent() {
  const [Peer, setPeer] = useState(null);

  useEffect(() => {
    // 仅在客户端加载PeerJS
    const loadPeerModule = async () => {
      const { default: PeerInstance } = await import('peerjs');
      setPeer(PeerInstance);
    };
    loadPeerModule();
  }, []);

  const initPeerConnection = () => {
    if (!Peer) return;
    // 初始化Peer连接
    const peer = new Peer({
      // 你的配置项
    });
    // 后续处理连接、监听事件等逻辑
  };

  return (
    <button onClick={initPeerConnection} disabled={!Peer}>
      初始化Peer连接
    </button>
  );
}

方案2：Pages Router中使用useEffect加载

如果使用的是Pages Router，直接在组件的useEffect中动态导入即可：

import { useEffect, useState } from 'react';

export default function PeerPage() {
  const [Peer, setPeer] = useState(null);

  useEffect(() => {
    async function initPeer() {
      const peerModule = await import('peerjs');
      setPeer(peerModule.default);
    }
    initPeer();
  }, []);

  // 编写Peer连接逻辑
  return <div>PeerJS 实时通信组件</div>;
}

方案3：手动判断浏览器环境（备选）

也可以通过判断window是否存在来条件导入，不过这种方式不推荐在组件顶层使用，更适合工具函数中：

let Peer;
if (typeof window !== 'undefined') {
  Peer = require('peerjs').default;
}

// 在客户端逻辑中使用
function createPeer() {
  if (!Peer) return;
  const peer = new Peer();
}

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