Unexpected token <

[William Lepinski]

I'm trying to compile a HTML (Handlebars) file to pure HTML and I'm getting this error:

gulp.task('handlebars', function() {
  gulp.src('./src/assets/handlebars/index.html')
    .pipe(hb({
      helpers: './src/assets/handlebars/helpers/**/*.js',
      partials: './src/assets/handlebars/**/*.html',
    }))
    .pipe(gulp.dest('dist/index.html'));
});

[14:36:40] SyntaxError: Unexpected token <
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at mapper (/node_modules/gulp-hb/node_modules/handlebars-wax/node_modules/require-glob/src/require-glob.js:50:12)
    at Array.map (native)
    at mapReduce (/node_modules/gulp-hb/node_modules/handlebars-wax/node_modules/require-glob/src/require-glob.js:86:4)

What am I doing wrong here?

[William Lepinski]

I noticed that the plugin is trying to require the .html files using require().

[Shannon Moeller]

Yep, that's the issue. Handlebars supports require()ing partials with the extensions .handlebars and .hbs. You'll want to rename your partial files, or add your own extension method.

[William Lepinski]

require.extensions['.html'] = function (module, filename) {
  module.exports = fs.readFileSync(filename, 'utf8');
};

Like that, right?

[Shannon Moeller]

Close. This should do it:

var fs = require('fs');
var handlebars = require('handlebars');
require.extensions['.html'] = function (module, filename) {
   module.exports = handlebars.compile(fs.readFileSync(filename, 'utf8'));
};

It's not an issue for gulp.src as that reads the file as text.

[William Lepinski]

Cool.
Closing the issue. Thanks.

[Tom Brückner]

I stumbled upon the same issue (want to use partials with .html extension), but I am using the new ES6 module import syntax instead of require:

import hb from 'gulp-hb';

Is there a solution working with this syntax as well?

[Shannon Moeller]

@derwaldgeist The module syntax currently de-sugars to a require() call, so the extensions hook still works (as of Node 6).

When native import lands in Node (likely to be v7), I'll make sure this plugin is compatible.

[Tom Brückner]

Thanks!