Truffle: Module not found 'child_process'

[fasidOnGit]

I am getting this error while I try to run it with Next.js
My question is Can we use truffle-hdwallet-provider in front end apps? Or Is it strictly to use in the backend? I understand the mnemonics, private keys that I get to share in browser but whatsoever for testing purposes I wanted to use. this is giving me the following error

./node_modules/truffle-hdwallet-provider/dist/index.js
Module not found: Can't resolve 'child_process' in '/home/user/Work/projectName/node_modules/truffle-hdwallet-provider/dist'

My package.json

{
  "name": "kickstarter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha",
    "dev": "next dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "fs-extra": "^7.0.1",
    "ganache-cli": "^6.4.3",
    "mocha": "^6.1.4",
    "next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "solc": "^0.5.7",
    "truffle-hdwallet-provider": "^1.0.7",
    "web3": "^1.0.0-beta.37"
  }
}

My web3.js file

import Web3 from 'web3';
import * as HDWalletProvider from 'truffle-hdwallet-provider';


const provider = new HDWalletProvider(
    '12 weods mnemonics',
    'infura/api/url'
);

const web3 = new Web3(provider);

export default web3;

[eggplantzzz]

@fasidOnGit I think it should be no problem to use that on the front end. I think that I heard there might be something wonky about version 1.0.7. Try downgrading to 1.0.6 for the moment and see if there is any difference. I think 1.0.8 should be out by tomorrow which I think should include a fix. So if this is indeed the problem with your setup then it should be solved soon.

[fasidOnGit]

@eggplantzzz Nope, I was actually using 1.0.6 where I encountered this error with Next.js then I upgraded the version to 1.0.7 even then I had the same issue. But I had no problem with a simple create-react-app.
Like you said let's wait until tomorrow for 1.0.8 :eyes:

[CruzMolina]

Ah, @fasidOnGit , there might be something we need to change in truffle-hdwallet-provider's webpack config. Will need to look into this. About to push out a release, so unfortunately this will have to wait until later this week. Meanwhile, can you share an example repo for debugging purposes?

[eggplantzzz]

@fasidOnGit So 1.0.8 is out, give it a try and let me know if you still get the same.

[fasidOnGit]

@eggplantzzz @CruzMolina Here's the repo with the error.
https://github.com/fasidOnGit/kickstarter

@eggplantzzz FYI: 1.0.8 doesn't do the fix either

[CruzMolina]

Thanks @fasidOnGit!

Will try to get your repo up and running next week. In the meanwhile can you try changing the target to "web" and add "swarm-js" to the externals list in truffle-hdwallet-provider's webpack config (webpack/webpack.config.js) ?

After making that change locally and doing a quick yarn prepare, dist appears to no longer bundle anything with child_process in it. However, I'm not sure if that breaks anything actually needed. Let me know if that works for you! 🤞

[eggplantzzz]

@fasidOnGit I cloned your repo, can you give me some steps to recreating the error?

[fasidOnGit]

@eggplantzzz well, npm run dev
Note: In the file web3.js you need to setup truffule-hdwallet-provider I have removed my creds. May be you could do something to set that up.

[eggplantzzz]

Ok thanks, I'll try to investigate and see if I come up with anything!

[eggplantzzz]

@fasidOnGit Yep, so it looks like there is some issue with truffle-hdwallet-provider and next.js. To be honest I'm not sure of the extent to which that package is compatible with things that are not Node. Perhaps you should try a different type of provider like web3. I'll take a look when I get some time and try to see if it could be something simple to change with truffle-hdwallet-provider.

[rogargon]

Experienced a similar error with module child_process and also net with and Angular application. Solved it by adding to package.json:

    ...
  },
  "browser": {
     "child_process": false, "net": false
  }
}

[CruzMolina]

Hey @fasidOnGit, you might want to give react-native-truffle-hdwallet-provider a shot. Looks like it's designed for the front-end, so even though you're using next.js, it _could_ work 🤞 .

[ppoliani]

Thanks @fasidOnGit!

Will try to get your repo up and running next week. In the meanwhile can you try changing the target to "web" and add "swarm-js" to the externals list in truffle-hdwallet-provider's webpack config (webpack/webpack.config.js) ?

After making that change locally and doing a quick yarn prepare, dist appears to no longer bundle anything with child_process in it. However, I'm not sure if that breaks anything actually needed. Let me know if that works for you! 🤞

Have you had any luck with this one?

[fasidOnGit]

@ppoliani Pretty busy with work. This one is my side project. Will try it this weekend(Hopefully :slightly_smiling_face: )

[fasidOnGit]

@ppoliani @CruzMolina Please feel free to close this one. I think it will take quite some time for me to look at my side project. Pretty busy right now. I can reopen if the workaround that is suggested above doesn't work out for me. Thanks :)

[CruzMolina]

Sounds good @fasidOnGit . Feel free to ping me if the workaround doesn't work.

[fasidOnGit]

Okay!! Thanks alot for the help here. Adding two things worked up for me.

1. Suggestions from @rogargon https://github.com/trufflesuite/truffle/issues/1943#issuecomment-488741750
2. And the following webpack.config.js. Thanks to @CruzMolina

const { resolve, join } = require("path");
const { IgnorePlugin } = require("webpack");
const path = require("path");

const moduleRoot = resolve(__dirname, "..");
const outputPath = join(moduleRoot, "dist");

module.exports = {
  mode: "production",
  entry: join(moduleRoot, "src", "index.js"),
  target: "web",
  devtool: "source-map",
  output: {
    path: outputPath,
    filename: "index.js",
    library: "truffle-hdwallet-provider",
    libraryTarget: "umd",
    umdNamedDefine: true
  },
  externals: ["bindings", "any-promise", "websocket", "swarm-js"],
  resolve: {
    alias: {
      // eth-block-tracker is es6 but automatically builds an es5 version for us on install. thanks eth-block-tracker!
      "eth-block-tracker": "eth-block-tracker/dist/es5/index.js",

      // replace native `scrypt` module with pure js `js-scrypt`
      "scrypt": "js-scrypt",

      // replace native `secp256k1` with pure js `elliptic.js`
      "secp256k1": "secp256k1/elliptic.js",
    }
  },
  plugins: [
    // ignore these plugins completely
    new IgnorePlugin(/^(?:electron|ws)$/)
  ]
};

[fasidOnGit]

Whatsoever, If someone faces another issue like window is not defined even after making the above-suggested changes. that's probably because next.js is server-rendered out of the box. so we need support from this library for that IMO :) I fixed it by a simple if loop to check window is not undefined