Handlebars.js: webpack + require handlebars error

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

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.

I got round this with ..

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

in my webpack config

thanks @gilesbradshaw :+1: :smile:

@abhisekp was this resolved? Please close if yes.

@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. :blush:

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

@gilesbradshaw
Thank you very much!

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.

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

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

This works fine!

To get this to work in an angular 4 project I had to do this:
import * as handleBars from 'handlebars/dist/handlebars';

normally I'd just do this:
import * as handleBars from 'handlebars';

The line above works fine in a typescript project in node, but not in angular 4.

HandleBars is the only project where I have to import like this. It makes me concerned I'm going to have a issue down the road. It seems like HandleBars does not play nice with angular's webpack.

I could have a look if anyone sets up a minimal example project that reproduces the issue. No promises as to the "when", though...

@swilliams-a3digital Getting Could not find a declaration file for module declare module 'handlebars' or adding @types/handlebars does not help. How did you solve this?

For others looking here

This is the best solution I have found
https://github.com/valtech-nyc/brookjs/blob/master/packages/brookjs/webpack.config.js#L39-L43
here https://github.com/pcardune/handlebars-loader/issues/110#issuecomment-358681867

Thanks to @mAAdhaTTah

UPD:

//fix handlebars warnings
config.resolve.alias = {
    ...config.resolve.alias,
    'handlebars/runtime': 'handlebars/dist/cjs/handlebars.runtime',
    'handlebars': 'handlebars/dist/cjs/handlebars.runtime',
};

This is retarded.
This handlebars library should have fixed this bug.
Yet they neglect and ignore.

The workaround is to replace:

import Handlebars from 'handlebars'

with:

import Handlebars from 'handlebars/dist/cjs/handlebars'

@catamphetamine if you have a good solution to this issue, you are welcome to file a pull request. As long as it doesn't break anything, I will merge and publish a new version. Things like const Handlebars = require('handlebars') in NodeJS and existing setups with older versions of webpack should still work.

About the "Yet they neglect and ignore":

The problem with handlebars is that there are not a lot collaborators and at the moment, as far as I can see, I am the only active one. Well, more or less active. It 23:26 now and this is the time I usually come to work on my private projects, because I have a family a daytime job and other hobbies.

So when you write "Yet they neglegt and ignore", there isn't a lot of "they". There is almost certainly no "they" that is getting paid to work on this project. I help people, because it's fun to talk to people and because it is fun to solve problems, fix bugs and write tests. Because I'm using Handlebars myself in a couple of projects, and because it feels good to stand in the stage-light from time to time. But I don't feel that it is my duty to do so. So I pick the issues that I like, mostly the ones that are quick and clear.

So, if you are using Handlebars and you have a problem and noone is going to solve it, maybe you should try to contribute a solution yourself.

I'll reopen the issue though, because it does not seem to be solved.

because it feels good to stand in the stage-light from time to time.

I'm doing opensource for fun too, though not as popular as this library.
And also for a line or two in my CV. Helps getting a better job.
I can see you not getting much profit out of it rather than just fun because it's not technically your project, like @nknapp/handlebars.js
You maintain it and @wycats gets all the credit and github stars as far as the URL bar goes.
Ok, at least now we know that this project is not so actively maintained anymore.
Still, it's used in many places (including legacy), I guess.
For example, SendGrid recently launched "customizable templates" using this handlebars language.
https://sendgrid.com/blog/how-to-use-sendgrids-dynamic-templates-for-your-transactional-emails/
https://github.com/sendgrid/sendgrid-nodejs/issues/221

As for the possible solution, it would be splitting the package into handlebars and handlebars/register like Babel did with their babel and babel/register.
They only install the require() hook when doing import 'babel/register'.
That would be a breaking change for another major version but I can see there most likely will be no such version.
Also one could create a file in root called something like core.js (module.exports = require('handlebars/dist/cjs/handlebars')) and then Webpack users would require handlebars/core instead of handlebars/dist/cjs/handlebars (along with a line in the README).
The creator of Webpack is also from Germany.

Anyway, import Handlebars from 'handlebars/dist/cjs/handlebars' works and I think you don't need to change anything in the library, just maybe add a line of documentation to README that for Webpack use import Handlebars from 'handlebars/dist/cjs/handlebars' instead of the regular import.

By the way, I wasn't referring specifically to you because you didn't leave a negative comment before in this issue.
I was referring to @methodbox and his comment:

Sounds like a problem with Webpack, not Handlebars.

And @rafde and his comment:

Seems like a problem with your setup since nobody else has this problem

Your comment didn't claim Webpack being "wrong" or anything so no wrong words from your side:

I could have a look if anyone sets up a minimal example project that reproduces the issue. No promises as to the "when", though...

You didn't say that "Webpack is doing it wrong, close the issue" so your comments are ok.

@nknapp
Anyway, import Handlebars from 'handlebars/dist/cjs/handlebars' works just fine and I think you don't need to change anything in the library.
Just maybe add a line to the README saying that "If you're using Webpack then import Handlebars from 'handlebars/dist/cjs/handlebars' instead of import Handlebars from 'handlebars'.
import Handlebars from 'handlebars/dist/cjs/handlebars' is fine and it works.

import Handlebars from 'handlebars/dist/cjs/handlebars

Worked for me as of this comment.

I agree with @catamphetamine though.

Better documentation is worth a lot and it wouldn't kill anyone to add that line to the installation page.

We all build great things and want people to use them.

But guess what, if the documentation sucks... so does the project because no one but you will be able to understand it.

And remember... people fear what they don't understand.

-end rant-

I do however appreciate your efforts on the library.
Being an open source dev is often a thankless and painful odyssey with very little reward.

Actually, I'm not trying to make people use Handlebars. I'm just trying to help people have already decided to use it.

I am currently building a new documentation site (whenever I have some time left) and I will include it there.

Should be resolved in #1102