Error including module with webpack

I am simply importing the library into my webpack project, but am receiving an error. I’m not even actually using the library, just importing it like this:

import helpers from 'handlebars-helpers';

When webpack bundles my files, I get the following error:

Module not found: Error: Can't resolve 'fs' in '/Users/me/dev/project/node_modules/handlebars-helpers/lib' resolve 'fs' in '/Users/me/dev/project/node_modules/handlebars-helpers/lib'
  Parsed request is a module
  using description file: /Users/me/dev/project/node_modules/handlebars-helpers/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/me/dev/project/node_modules/handlebars-helpers/package.json (relative path: ./lib)
    resolve as module
      /Users/me/dev/project/node_modules/handlebars-helpers/lib/node_modules doesn't exist or is not a directory
      /Users/me/dev/project/node_modules/node_modules doesn't exist or is not a directory
      /Users/me/dev/node_modules doesn't exist or is not a directory
      /Users/me/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/me/dev/project/node_modules/handlebars-helpers/node_modules
        using description file: /Users/me/dev/project/node_modules/handlebars-helpers/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/me/dev/project/node_modules/handlebars-helpers/package.json (relative path: ./node_modules)
          using description file: /Users/me/dev/project/node_modules/handlebars-helpers/package.json (relative path: ./node_modules/fs)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/me/dev/project/node_modules/handlebars-helpers/node_modules/fs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/me/dev/project/node_modules/handlebars-helpers/node_modules/fs.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/me/dev/project/node_modules/handlebars-helpers/node_modules/fs.json doesn't exist
            as directory
              /Users/me/dev/project/node_modules/handlebars-helpers/node_modules/fs doesn't exist
      looking for modules in /Users/me/dev/project/node_modules
        using description file: /Users/me/dev/project/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/me/dev/project/package.json (relative path: ./node_modules)
          using description file: /Users/me/dev/project/package.json (relative path: ./node_modules/fs)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/me/dev/project/node_modules/fs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/me/dev/project/node_modules/fs.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/me/dev/project/node_modules/fs.json doesn't exist
            as directory
              /Users/me/dev/project/node_modules/fs doesn't exist

If I remove the import statement, the error goes away. Am I missing something obvious here or is there a bug in the library?

I’m using Node v7.9.0, webpack version 3.12.0, and handlebars-helpers version 0.10.0.

[doowb]

@flyingL123 I got it working with the following webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
     handlebars: 'handlebars/dist/handlebars.min.js'
    }
  },
  node: {
    fs: 'empty',
    readline: 'empty'
  }
};

and the src/index.js looks like this:

import handlebars from 'handlebars';
import helpers from 'handlebars-helpers';

function component(name) {
  handlebars.registerHelper(helpers());

  var element = document.createElement('div');
  element.innerHTML = handlebars.compile('<button>{{capitalize name}}</button>')({ name });
  return element;
}

document.body.appendChild(component('doowb'));

This comment from @spplante helped a lot.

[doowb]

Yup, I just updated my project to webpack 4 and there are no issues.

Awesome!

When bundling handlebars and handlebars-helpers only, I’ve usually seen the size be around 1 - 1.2MB, so there might be a configuration setting or plugin for reducing that.

I’m going to close this issue since bundling is working with the latest webpack. I’ll be opening an issue on log-utils to remind myself (or anyone else) to update it based on what we’ve found here.