🐛 Issue with Next.js: Can't resolve 'dgram' about webtorrent HOT 3 OPEN

Hi @oviirup,

Getting this error typically means that whatever bundler you are using isn't respecting the browser overrides used to build the browser version of WebTorrent, which seems to be a known issue with next.js.

I would recommend using the pre-built browser version from webtorrent/dist/webtorrent.min.js, rather than trying to bundle it yourself. If you are up for the challenge, it appears you could possibly work around this with a custom webpack config in your next.config.js.

from webtorrent.

@SilentBot1 thanks for the solution. I kept the webtorrent.min.js in lib folder and imported the script in my project. Here is the code for the page.

'use client';

import React from 'react';
import WebTorrent from '@/lib/webtorrent';

export default function HomePage() {
  const client = React.useRef();

  React.useEffect(() => {
    // ignore in server and run only in client
    if (typeof window === 'undefined') return;

    client.current ??= new WebTorrent(); //! ERROR

  }, []);

  return <main>This is main page</main>;
}

In the development server it gives this error

⨯ ReferenceError: self is not defined
   at 9639 (...\.next\server\chunks\ssr\src_6f687d._.js:4290:56)
   at n (...\.next\server\chunks\ssr\src_6f687d._.js:4343:16)
   ...
GET / 500 in 768ms

Though the torrent file is loaded successfully, but this error breaks the build process.

from webtorrent.

Hi @oviirup,

The error you're getting is due using the browser version of WebTorrent, while also performing SSR (in Node). You will likely want to dynamically import the library with ssr: false, so it only loads on the client and not the server, docs are available here.

from webtorrent.