🐛 Issue with Next.js: Can't resolve 'dgram'

[oviirup]

I am trying to create a project with Next.js and webtorrent, but I am getting an error message that says:

./node_modules/k-rpc-socket/index.js:1:0
Module not found: Can't resolve 'dgram'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/k-rpc/index.js
./node_modules/bittorrent-dht/client.js
./node_modules/bittorrent-dht/index.js
./node_modules/torrent-discovery/index.js
./node_modules/webtorrent/lib/torrent.js
./node_modules/webtorrent/index.js
./app/page.jsx

I tried several combinations for managers and node versions, still there was error. I also tried it in vite project (different error). I tried installing the package dgram which is deprecated, but the result is the same.

Reproduction process

initiate a next project with all the default values...

npx create-next-app test-webtorrent --js --app

Go the the index page: app/page.js, clear out the contents and paste in the following code.

'use client';

import React from 'react';
import WebTorrent from 'webtorrent';

export default function Home() {
  React.useEffect(() => {
    const client = new WebTorrent();
  }, []);

  return <main>hello world</main>;
}

Package details

webtorrent: v2.2.1
next: v14.1
react: v18.2

System details

Windows 11,
node v18, v20, v21
pnpm v18.15.5
yarn v1.22.22

[SilentBot1]

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.

[oviirup]

@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.

[SilentBot1]

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.