Ganache does not work with Webpack 5

[HufsaEu]

Hello,

I have a bigger project and wanted to use Ganache but I had issues with getting this to work. So I tried creating a minimal project and it looks like it fails with the same errors:

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "NODE_ENV=production webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ganache": "^7.0.4"
  },
  "devDependencies": {
    "node-loader": "^2.0.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  target: 'node',
  entry: './index.js',
  node: {
    __dirname: false,
  },
  module: {
    rules: [
      {
        test: /\.node$/,
        loader: "node-loader",
      },
    ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

index.js (taken from one of ganache examples, no changes)

const ganache = require("ganache");

const options = {};
const server = ganache.server(options);
const PORT = 8545;
server.listen(PORT, async err => {
  if (err) throw err;

  console.log(`ganache listening on port ${PORT}...`);
  const provider = server.provider;
  const accounts = await provider.request({
    method: "eth_accounts",
    params: []
  });
});

After running build command npm run build i get following errors:

> [email protected] build
> NODE_ENV=production webpack

assets by status 65.4 MiB [cached] 22 assets
runtime modules 238 bytes 3 modules
cacheable modules 12.7 MiB
  modules by path ./node_modules/ganache/node_modules/ 300 KiB 68 modules
  modules by path ./node_modules/ganache/dist/node/ 12.4 MiB
    modules by path ./node_modules/ganache/dist/node/*.node 4.08 KiB 21 modules
    optional modules 12.4 MiB [optional] 10 modules
    ./node_modules/ganache/dist/node/core.js 4.02 KiB [built] [code generated]
    ./node_modules/ganache/dist/node/cli.js 13.7 KiB [built] [code generated]
  ./index.js 361 bytes [built] [code generated]
+ 20 modules

WARNING in ./node_modules/ganache/dist/node/0.js 2:1260862-1260877
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/ganache/dist/node/ sync ^\.\/.*$ ./0.js ./0
 @ ./node_modules/ganache/dist/node/core.js 1:3900-3938
 @ ./index.js 1:16-34

WARNING in ./node_modules/ganache/dist/node/0.js 2:1262351-1262378
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/ganache/dist/node/ sync ^\.\/.*$ ./0.js ./0
 @ ./node_modules/ganache/dist/node/core.js 1:3900-3938
 @ ./index.js 1:16-34

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/ganache/dist/node/cli.js.map 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {"version":3,"file":"cli.js","mappings":";CAAA,SAAUA,iCAAiCC,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,EAAQG,QAAQ,+BAAgCA,QAAQ,UAAWA,QAAQ,[etc......]
 @ ./node_modules/ganache/dist/node/ sync ^\.\/.*$ ./cli.js.map
 @ ./node_modules/ganache/dist/node/core.js 1:3900-3938
 @ ./index.js 1:16-34

ERROR in ./node_modules/ganache/dist/node/core.js.map 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {"version":3,"file":"core.js","mappings":"CAAA,SAAUA,iCAAiCC,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,EAAQG,QAAQ,+BAAgCA,QAAQ,UAAWA,QAAQ,[etc......]
 @ ./node_modules/ganache/dist/node/ sync ^\.\/.*$ ./core.js.map
 @ ./node_modules/ganache/dist/node/core.js 1:3900-3938
 @ ./index.js 1:16-34

ERROR in ./node_modules/ganache/dist/node/0.js.map 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {"version":3,"file":"0.js","mappings":";2EACA,IAAIA,EAAmBC,MAAQA,KAAKD,kBAAqBE,OAAOC,OAAS,SAAUC,EAAGC,EAAGC,EAAGC,QAC7EC,IAAPD,IAAkBA,EAAKD,GAC3BJ,[etc......]
 @ ./node_modules/ganache/dist/node/ sync ^\.\/.*$ ./0.js.map
 @ ./node_modules/ganache/dist/node/core.js 1:3900-3938
 @ ./index.js 1:16-34

ERROR in ./node_modules/ganache/dist/node/1.js.map 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {"version":3,"file":"1.js","mappings":";wEACAA,OAAOC,eAAeC,EAAS,aAAc,CAAEC,OAAO,IACtDD,EAAQE,aAAU,EAClB,MAAMC,EAAU,EAAQ,GACxB,MAAMD,gBAAgBC,EAAQC,KAO1BC,[etc......]
 @ ./node_modules/ganache/dist/node/ sync ^\.\/.*$ ./1.js.map
 @ ./node_modules/ganache/dist/node/core.js 1:3900-3938
 @ ./index.js 1:16-34

ERROR in ./node_modules/ganache/dist/node/4.js.map 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {"version":3,"file":"4.js","mappings":"4DAAA,MAAMA,EAAY,EAAQ,MACpB,SAAEC,GAAa,EAAQ,KACvB,MAAEC,EAAK,OAAEC,GAAW,EAAQ,MAC5B,aAAEC,GAAiB,EAAQ,IAKjC,SAASC,[etc......]
 @ ./node_modules/ganache/dist/node/ sync ^\.\/.*$ ./4.js.map
 @ ./node_modules/ganache/dist/node/core.js 1:3900-3938
 @ ./index.js 1:16-34

webpack 5.72.0 compiled with 5 errors and 2 warnings in 18028 ms

[davidmurdoch]

Ganache is already webpacked, and I wouldn't try webpacking Ganache again, it will get complicated due to all the native dependencies. You can try to use the web version, which has all native dependencies removed ./dist/web/ganache.min.js.

We also ship @ganache/core, which isn't already webpacked.

To webpack yourself you'll probably want to take inspiration from https://github.com/trufflesuite/ganache/tree/develop/src/packages/ganache/webpack.

I don't think this is a Ganache issue; do you mind if I move convert this to a GitHub Discussion?