在Create React App中使用libp2p时出现无法解析‘node:http’的问题求助

Hey there! No worries at all—diving into libp2p for the first time comes with its share of setup hurdles, and your question is totally valid. Let’s walk through what’s causing that node:http error and how to fix it, plus tweak your component to work properly.

What’s the Root Issue? #

The Module not found: Can’t resolve ‘node:http’ error happens because:

1. Some of libp2p’s dependencies (like node-fetch) use Node.js-specific module imports with the node: prefix (e.g., node:http), which aren’t natively handled by CRA’s default Webpack configuration.
2. CRA doesn’t automatically map these Node.js core modules to their browser-compatible alternatives, unlike tools like Parcel (which is why the examples you saw work with Parcel out of the box).

Libp2p does fully support browser environments—we just need to adjust CRA’s config to handle those Node.js imports.

Step 1: Adjust CRA’s Webpack Configuration #

We’ll use react-app-rewired and customize-cra to modify the config without ejecting (which is safer than ejecting your CRA project):

1. Install the required dev dependencies:

   npm install react-app-rewired customize-cra --save-dev
   

2. Install browser-compatible replacements for Node.js core modules:

   npm install stream-http https-browserify empty-module --save
   

3. Create a config-overrides.js file in your project root with this content:

   const { override, addWebpackAlias } = require('customize-cra');
   
   module.exports = override(
     // Map Node.js core modules to browser-friendly alternatives
     addWebpackAlias({
       'node:http': 'stream-http',
       'node:https': 'https-browserify',
       'node:fs': 'empty-module', // We don't need fs in the browser
       'node:net': 'empty-module', // Net is Node-only
       'node:tls': 'empty-module'  // TLS is Node-only
     })
   );
   

4. Update your package.json scripts to use react-app-rewired instead of react-scripts:

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

Step 2: Fix Your Libp2p Component #

Your component has a couple of small issues that need fixing too:

1. Missing WebSockets import: You’re referencing WebSockets but haven’t imported it. Install the module first:

   npm install libp2p-websockets --save
   

   Then add the import to your component:

   import { WebSockets } from 'libp2p-websockets';
   

2. Async/await for Libp2p.create: Libp2p.create() is asynchronous, so you need to use async/await (and handle errors):

   async componentDidMount(){
     try {
       // Store the node on the component instance instead of a global
       this.node = await Libp2p.create({
         addresses:{
           listen: [
             '/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]
         }
       });
   
       // Don't forget to start the node!
       await this.node.start();
       console.log('Libp2p node started successfully:', this.node);
     } catch (error) {
       console.error('Failed to initialize libp2p node:', error);
     }
   }
   

3. Cleanup on unmount: Add a componentWillUnmount method to stop the node when the component is removed:

   async componentWillUnmount() {
     if (this.node) {
       await this.node.stop();
       console.log('Libp2p node stopped');
     }
   }
   

Why Parcel Works But CRA Doesn’t #

Parcel has built-in support for mapping Node.js core modules to browser alternatives, so it handles the node:http imports automatically. CRA’s default config is more restrictive to keep things simple for most React projects, which is why we need to add the aliases manually.

Final Notes #

• You don’t need a separate "browser version" of libp2p—the same npm modules work for both Node.js and browsers, as long as the bundler is configured correctly.
• Make sure all your libp2p-related dependencies are up to date to avoid compatibility issues.

内容的提问来源于stack exchange，提问作者tutiplain