Module not found 'child_process'

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;

[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
  }
}

[eggplantzzz]

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