Error while importing js-libp2p packages in Blockchain application

Users and Developers js
1

I have installed some js-libp2p packages on my Ethereum Blockchain-ipfs project and I wrote some codes like below.

const TCP = require('libp2p-tcp');
const MulticastDNS = require('libp2p-mdns');
const WS = require('libp2p-websockets');
const KadDHT = require('libp2p-kad-dht')
const mplex = require('libp2p-mplex');
const secio = require('libp2p-secio');
const libp2p = require('libp2p');

But the multicast-dns ,libp2p and libp2p-kad-dht packages is showing some error. Below shown is the error while importing libp2p package:

ERROR in ./~/libp2p/src/index.js
Module parse failed: /home/toshiba/Documents/sul/ipfs/CannesNew Full Codejan17/SportsFull CodeTESTRpc12may/SportsFull Code1april/node_modules/libp2p/src/index.js Unexpected token (120:8)
You may need an appropriate loader to handle this file type.
| this._dht = new DHT(this._switch, {
| datastore: this.datastore,
| …this._config.dht
| })
| }
@ ./app/backend/app.js 62:15-32
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app/backend/app.js

My webpack.config.js code is shown below,

module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
loaders: [
{ test: /\.json$/, use: 'json-loader' },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
]
},

Environment

Npm version: 6.4.1
Node version: 8.12.0
Os:Ubuntu 18.04
webpack : 2.2.1
babel-loader: 6.2.10

Anyone please help me to resolve this issue.

2

@sulvin93 it looks like the error is due to webpack not being able to handle the spread operator. The solution at https://github.com/babel/babel-loader/issues/170#issuecomment-257197385 might resolve this.

3

@jacobheun Thanks for the reply. I’ve tried every preset/plugin ( stage-0,
stage-2, stage-3, transform-es2015-destructuring,
transform-object-rest-spread, transform-es2015-spread,
transform-es2015-parameter) but nothing works for me. Is there any solution without using react.

4

@sulvin93 have you tried upgrading webpack?, it looks like the version is quite old.
There is a simple example of libp2p running in the browser at https://github.com/libp2p/js-libp2p/tree/v0.25.4/examples/libp2p-in-the-browser. It is using browserify to do the build and serve to run the local static files server, no other framework is being used there.

5

@jacobheun Thank you. The issue has been resolved and added the working code on my webpack.config.js file.

module: {
    rules: [
      { test: /\.json$/, use: 'json-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: {
          test: /(node_modules|bower_components)/,
          not: [
            /libp2p/
          ]
        },
        query: {
            presets: ['es2015'],
            plugins:['transform-object-rest-spread']

        }
       }
    ]
  },

  node:{
    dgram: 'empty',
    fs:'empty',
    net:'empty',
    tls:'empty'
  }
6

Great! Just a note, in the browser you won’t be able to use libp2p-tcp or
libp2p-mdns modules, as those only support node.js. That may be why you needed the node section in your config.