webpack + require handlebars error

[abhisekp]

I get the following error simply by using require handlebars.

▶ webpack --display-modules   
Hash: bdb0fe35e2f8bde783e5
Version: webpack 1.12.12
Time: 116ms
         Asset     Size  Chunks             Chunk Names
bundle.main.js  2.82 kB       0  [emitted]  main
   [0] ./src/index.js 150 bytes {0} [built]
   [1] ./~/handlebars/lib/index.js 792 bytes {0} [built] [3 warnings] [3 errors]

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.

ERROR in ./~/handlebars/lib/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../dist/cjs/handlebars/compiler/printer in /home/abhisekp/MyProjects/JSApps/MadeWithLove-Webpack/node_modules/handlebars/lib
 @ ./~/handlebars/lib/index.js 9:14-64

ERROR in ./~/handlebars/lib/index.js
Module not found: Error: Cannot resolve module 'fs' in /home/abhisekp/MyProjects/JSApps/MadeWithLove-Webpack/node_modules/handlebars/lib
 @ ./~/handlebars/lib/index.js 17:11-24

ERROR in ./~/handlebars/lib/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../dist/cjs/handlebars in /home/abhisekp/MyProjects/JSApps/MadeWithLove-Webpack/node_modules/handlebars/lib
 @ ./~/handlebars/lib/index.js 7:17-50 

My index.js

var handlebars = require('handlebars');

My package.json

  "dependencies": {
    "handlebars": "^4.0.5"
  }

[benjeffery]

As mentioned in #1102 adding the line
"browser": "dist/handlebars.js",
to handlebars' package.json solved this for me.

[methodbox]

Sounds like a problem with Webpack, not Handlebars.
The normal default path for any node module core files is /node_modules/module_name/dist.

That's where a node app will assume they are located; this means Webpack is handling require(); differently than node.

[gilesbradshaw]

I got round this with ..

resolve: {
    alias: {
       handlebars: 'handlebars/dist/handlebars.min.js'
    }
}

in my webpack config

[abhisekp]

thanks @gilesbradshaw 👍 😄

[rafde]

@abhisekp was this resolved? Please close if yes.

[abhisekp]

@rafde I've not checked it but closing this issue as the issue has been made clear and a clear solution is suggested.

Thanks for the reminder. 😊

[nkonev]

issue still reproducing if I require handlebars somewhere in .js:

var Handlebars = require('handlebars');
Handlebars.registerHelper('greet', function(name) {
            return 'Hello, name=' + name + '!';
});

but if I remove this line

var Handlebars = require('handlebars');

issue is gone

[flyher]

@gilesbradshaw
Thank you very much!

[oocx]

I also get this error when using handlebars with an Angular 2 CLI project. I can't change my webpack configuration because the Angular CLI team decided to hide webpack details from Angular CLI users and they don't officially support modifying the webpack configuration.

[abdel-ships-it]

@oocx You could just import the JS file from the node_modules folder like so

import 'handlebars/dist/handlebars.min.js';

This works fine!