Installed with yarn / built with webpack: Module not found: Error: Can't resolve 'fs' in 'tabletop-example/node_modules/request/lib'

[Olmo]

I have an empty project with a stock webpack.config.js, I installed tabletop through yarn and have the following source file:

const tabletop = require('tabletop')
console.log(tabletop)

I get the following errors:

ERROR in ./node_modules/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in 'tabletop-example/node_modules/request/lib'
 @ ./node_modules/request/lib/har.js 3:9-22
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/tabletop/src/tabletop.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js

ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in 'tabletop-example/node_modules/forever-agent'
 @ ./node_modules/forever-agent/index.js 6:10-24
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/tabletop/src/tabletop.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js

ERROR in ./node_modules/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 'tabletop-example/node_modules/tough-cookie/lib'
 @ ./node_modules/tough-cookie/lib/cookie.js 32:10-24
 @ ./node_modules/request/lib/cookies.js
 @ ./node_modules/request/index.js
 @ ./node_modules/tabletop/src/tabletop.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js

ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in 'tabletop-example/node_modules/tunnel-agent'
 @ ./node_modules/tunnel-agent/index.js 3:10-24
 @ ./node_modules/request/lib/tunnel.js
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/tabletop/src/tabletop.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js

ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'tabletop-example/node_modules/forever-agent'
 @ ./node_modules/forever-agent/index.js 7:10-24
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/tabletop/src/tabletop.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js

ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'tabletop-example/node_modules/tunnel-agent'
 @ ./node_modules/tunnel-agent/index.js 4:10-24
 @ ./node_modules/request/lib/tunnel.js
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/tabletop/src/tabletop.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js

I feel like tabletop is trying to use NodeJS modules which do not exist in the browser. Am I building it wrong? My webpack.config.js is pretty much stock:

/* eslint-env node */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

// Try the environment variable, otherwise use root
const ASSET_PATH = process.env.ASSET_PATH || '/';

module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js',
    publicPath: ASSET_PATH,
  },

  plugins: [
    // Generates default index.html
    new HtmlWebpackPlugin({
      title: 'tabletop-example',
      template: 'src/index.ejs',
    })
  ],

  module: {
    rules: [
      // allows us to import css files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  },

  // these settings are used by webpack-dev-server
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    historyApiFallback: true,
  }
};

Any advice would be appreciated.

[Jonathan Soma]

I'm unfortunately tragic at node & co debugging, hopefully someone else will chime in!

[Marco Q]

You should be able to add:

externals: ['tls', 'net', 'fs'],

to your webpack config, and it will not try to include them.

[Seth Green]

I realize this is old, but I'm having a similar problem. @ojz - did you ever discover your problem here?

[Olmo]

Yes, the approach suggested by @marcoqu worked for me.

[Ocoolsanni]

for someone else who hasn't found the above solutions a thumbs-up can as well try this,

npm i tls
npm i net
npm i fs

worked for me in my Angular 8 Ionic 5 project when using @google/maps

[Leon Kalema]

via webpack i added

node:{ ...config.node, fs: 'empty', }

worked in svelte sapper :)