While I have no problems on a Mac, this problem occurred after I cloned the project into a Windows machine. All the gulp tasks run without a problem, however I get a "Uncaught UndefinedTemplateError: Cannot render the template since it is null or undefined" error on the console and browser doesn't render any html. There is gulp-handlebars responsible for compiling hbs files. When Marionette.LayoutView try to access template, it returns undefined. This is the boilerplate I use. https://github.com/kiki-le-singe/marionette-boilerplate
Here is my LayoutView,
Marionette.LayoutView.extend({
el: 'body',
template: templates['root-layout']
config.js
module.exports = {
handlebars: {
src: {
templates: 'app/scripts/**/[^_]*.hbs',
partials: ['app/scripts/**/_*.hbs']
},
dest: 'app/scripts/'
// dest: '.tmp/scripts/'
}
};
handlebars.js
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var config = require('./config').handlebars;
var merge = require('merge-stream');
gulp.task('handlebars', function () {
var partials = gulp.src(config.src.partials)
.pipe($.handlebars())
.pipe($.wrap('Handlebars.registerPartial("<%= processPartialName(file.relative) %>", Handlebars.template(<%= contents %>));', {}, {
imports: {
processPartialName: function (filePath) {
var matches = filePath.match(new RegExp('(modules/(\\w+)/templates|templates)/((.*)\/?)_(.*).js'));
if (!matches) {
return filePath;
}
return (matches[2] ? matches[2] + '/' : '') + (matches[3] ? matches[3] : '') + matches[5];
}
}
}));
// Load templates from the templates/ folder relative to where gulp was executed
var templates = gulp.src(config.src.templates)
// Compile each Handlebars template source file to a template function
.pipe($.handlebars())
.pipe($.wrap('Handlebars.template(<%= contents %>)'))
.pipe($.declare({
namespace: 'templates',
noRedeclare: true, // Avoid duplicate declarations
processName: function (filePath) {
var matches = filePath.match(new RegExp('(modules/(\\w+)/templates|templates)/((.*)\/?)(.*).js'));
alert(matches);
if (!matches) {
return filePath;
}
return (matches[2] ? matches[2] + '/' : '') + (matches[3] ? matches[3] : '');
}
}));
// Output both the partials and the templates as build/js/templates.js
return merge(partials, templates)
.pipe($.concat('templates.js'))
.pipe($.wrap('define(["handlebars"], function(Handlebars) {<%= contents %>return this["templates"];});'))
.pipe(gulp.dest(config.dest));
});
This is compiled templates.js
define(["handlebars"], function(Handlebars) {this["templates"] = this["templates"] || {};
this["templates"]["c:\\Repos\\kamyoncular\\app\\scripts\\templates\\root-layout"] = this["templates"]["c:\\Repos\\kamyoncular\\app\\scripts\\templates\\root-layout"] || {};
this["templates"]["c:\\Repos\\kamyoncular\\app\\scripts\\templates\\root-layout"]["js"] = Handlebars.template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
return "<header class=\"header\"></header>\n<div class=\"container\"></div>\n<footer class=\"footer\">\n <div class=\"row\">All rights reserved.\n </div>\n</footer>\n";
},"useData":true});