Cannot resolve "node:http" when using libp2p with create-react-app

Hi everyone,

I am new to libp2p, so please excuse me if this is something that’s been asked/discussed elsewhere. I am trying to set up in a newly created project made with create-react-app. The app currently has one component with the following:

import React, {Component} from 'react';
import mplex from 'libp2p-mplex';
import Noise from 'libp2p-noise';
import Libp2p from 'libp2p';

class Connector extends Component {

    constructor (props)
    {
        super(props);
        this.state = {};
    }

    componentDidMount(){
        node = Libp2p.create({
            addresses:{
                isten: [
                    '/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
                    '/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
                  ]
            },
            modules:{
                connEncryption:[Noise],
                streamMuxer:[mplex],
                transport:[WebSockets]
            }
        
        })
        console.log(node);
    }

    render(){
        return (<div>The connector component</div>);
    }
    
}


export default Connector;

I know this alone is not enough to connect to anything, but it doesn’t even compile. I get the following error message when I run this:

Module not found: Can’t resolve ‘node:http’ in ‘/Users/myuser/projects/p2p-browser/node_modules/node-fetch/src’

I looked into the source code of the node-fetch module referenced and found that, indeed, it is requiring node:http. I also found that the node: prefix is to get node to include always node’s native http module. Since this is a react-app, which runs on the browser, I see no reason at all to use node-fetch, which leads me to think that either libp2p is not compatible with the browser, or somehow I am using the node.js version of libp2p instead of the “browser version”, though so far, I haven’t found any documentation to suggest there is a “browser version”, the examples I’ve seen use parcel and include the same npm modules. So, am I missing something, or is libp2p simply incompatible with create-react-app and needs to be compiled for the browser with parceljs?

Any help will be greatly appreciated. Thank you.

Hello @tutiplain

I recommend you have a look on how js-ipfs is set up with CRA js-ipfs-examples/examples/browser-create-react-app at master · ipfs-examples/js-ipfs-examples · GitHub

js-libp2p should be similar to it.

Let me know if it helped

Thanks for your reply. I was able to solve the problem by switching to another computer, using the latest stable node.js version and using yarn instead of npm (I think this last one is what made the difference.

1 Like