ParseError: Unexpected token with Browserify and template files

Question

I'm developing a site using Backbone and I have Watchify running to bundle the application. Everything works fine with the javascript modules, but I am having a problem with .hbs templates, with Watchify throwing parse errors when processing the template files. These are really simple templates, the one in question literally contains only this html:

<p>Hello world!</p>
<ul id="menu">
</ul>

I have installed hbsfy am invoking it thusly:

watchify ./app/main.js -t hbsfy -o static/js/bundle.js -v

The error returned:

/home/***/***/backbone_app/app/node_modules/templates/layout.hbs:1
        <p>Hello world!</p>
        ^
ParseError: Unexpected token

I've read over the docs and looked in several locations online and honestly can't see what I am doing wrong here. Thanks for any insight you can offer.

Answer 1

Try this instead

watchify -t hbsfy ./app/main.js -o static/js/bundle.js -v

Answer 2

Your template is under node_modules. Browserify transforms only apply to "top-level" files, i.e. files from your app, not of your dependencies.

Instead try the --global-transform flag:

watchify -g hbsfy ./app/main.js -o static/js/bundle.js -v