Search code examples
javascriptreactjsnext.jspeerjs

Import PeerJs to NextJs

So I'm learning NextJs and trying to build a audio chat app and I'm stuck when I try to import PeerJs

Its throwing an window is not defined error.

import Peer from 'peerjs';

export default function Home() {

useEffect(() => {
  const myPeer = new Peer(undefined, {
    host: '/',
    port: '3001'
  })
}, [])
}
Solution

  • This is because using nextjs, code is first evaluated in server side (render to HTML). At this stage, windowis not defined. This is probably because peer js is performing some side effect during import. To workaround this, you could use dynamic import:

    useEffect(() => {
  import('peerjs').then(({ default: Peer }) => {
    // Do your stuff here
  });
}, [])