Unable to load PostGres library in custom data source

[morelt98]

Hey experts, I’m trying to create a custom data source, which is a wrapper around a postgres database. As such, after following these steps, I tried installing the pg npm package and importing it into the datasource.ts file. After running npm run dev, I got the following errors:

ERROR in ../node_modules/pg/lib/connection-parameters.js 3:10-24
Module not found: Error: Can't resolve 'dns' in '.../node_modules/pg/lib'
 @ ../node_modules/pg/lib/client.js 8:27-61
 @ ../node_modules/pg/lib/index.js 3:13-32
 @ ./datasource.ts 48:0-28 113:31-37
 @ ./module.ts 5:0-42 8:43-53

ERROR in ../node_modules/pg/lib/connection.js 94:16-30
Module not found: Error: Can't resolve 'net' in '.../node_modules/pg/lib'
 @ ../node_modules/pg/lib/index.js 5:17-40
 @ ./datasource.ts 48:0-28 113:31-37
 @ ./module.ts 5:0-42 8:43-53

ERROR in ../node_modules/pg/lib/stream.js 22:16-30
Module not found: Error: Can't resolve 'net' in '.../node_modules/pg/lib'
 @ ../node_modules/pg/lib/connection.js 6:39-58
 @ ../node_modules/pg/lib/index.js 5:17-40
 @ ./datasource.ts 48:0-28 113:31-37
 @ ./module.ts 5:0-42 8:43-53

ERROR in ../node_modules/pg/lib/stream.js 27:14-28
Module not found: Error: Can't resolve 'tls' in '.../node_modules/pg/lib'
 @ ../node_modules/pg/lib/connection.js 6:39-58
 @ ../node_modules/pg/lib/index.js 5:17-40
 @ ./datasource.ts 48:0-28 113:31-37
 @ ./module.ts 5:0-42 8:43-53

ERROR in ../node_modules/pgpass/lib/index.js 4:9-22
Module not found: Error: Can't resolve 'fs' in '.../node_modules/pg/lib'
 @ ../node_modules/pg/lib/client.js 228:23-40
 @ ../node_modules/pg/lib/index.js 3:13-32
 @ ./datasource.ts 48:0-28 113:31-37
 @ ./module.ts 5:0-42 8:43-53

I got the same errors for other packages as well (crypto, stream, util, path, buffer, vm). I believe this is because webpack 5 doesn’t include these libraries anymore, so I followed this tutorial to extend the default webpack config to this:

return merge(baseConfig, {
    resolve: {
        fallback: {
            "crypto": require.resolve("crypto-browserify"),
            "stream": require.resolve("stream-browserify"),
            "util": require.resolve("util/"),
            "path": require.resolve("path-browserify"),
            "buffer": require.resolve("buffer/"),
            "vm": require.resolve("vm-browserify"),
            "assert": require.resolve("assert/"),
            "fs": false,
            "dns": false,
            "net": false,
            "tls": false,
        }
      },
      plugins: [
        new ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
        }),
      ]
  });

However, I’m not seeing any of my settings:

Note that when I comment out the pg import and reference, I get my settings back:

Any ideas how to fix this?