Libp2p not working with React

Users and Developers
1

I am trying to use Libp2p at browser with React but I am not able to make it work. I just created a new React app, installed libp2p using npm install libp2p and when I import libp2p using const Libp2p = require('libp2p') I get the following errors:

Compiled with problems:

ERROR in node:fs

Module build failed: UnhandledSchemeError: Reading from “node:fs” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

ERROR in node:https

Module build failed: UnhandledSchemeError: Reading from “node:https” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

ERROR in node:http

Module build failed: UnhandledSchemeError: Reading from “node:http” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

ERROR in node:path

Module build failed: UnhandledSchemeError: Reading from “node:path” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

ERROR in node:stream

Module build failed: UnhandledSchemeError: Reading from “node:stream” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

ERROR in node:url

Module build failed: UnhandledSchemeError: Reading from “node:url” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

ERROR in node:util

Module build failed: UnhandledSchemeError: Reading from “node:util” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

ERROR in node:worker_threads

Module build failed: UnhandledSchemeError: Reading from “node:worker_threads” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

ERROR in node:zlib

Module build failed: UnhandledSchemeError: Reading from “node:zlib” is not handled by plugins (Unhandled scheme).
Webpack supports “data:” and “file:” URIs by default.
You may need an additional plugin to handle “node:” URIs.

2

Hello @Prankster2k -

Are you using a React app as made by create-react-app?
If so, you may need to use the module import syntax that Webpack and browsers rely on.

Here’s an example of all the imports I use in my peer.js file;
you can copy any you feel are necessary.

import Libp2p from "libp2p";
import Websockets from "libp2p-websockets";
import WebRTCStar from "libp2p-webrtc-star";
import { NOISE } from "libp2p-noise";
import Mplex from "libp2p-mplex";
import Bootstrap from "libp2p-bootstrap";
import KadDHT from "libp2p-kad-dht";

import PeerId from "peer-id";
import pushable from "it-pushable";
import pipe from "it-pipe";

If you still see errors for node:url, node:stream, node:path, node:http, node:fs, and so on,
you may need fallbacks enabled in your config/webpack.config.js file; here are some I am using in another codebase:

    resolve: {
      // Some libraries import Node modules but don't use them in the browser.
      // Tell webpack to provide empty mocks for them so importing them works.
      fallback: {
        child_process: false,
        dgram: false,
        dns: 'mock',
        fs: false,
        http2: false,
        module: false,
        net: false,
        perf_hooks: false,
        stream: require.resolve('stream-browserify'),
        timers: false,
        tls: false,
      },
  }

You may see error messages in the console recommending specific fallbacks for your use.
Good luck!