0

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});
Ayberk
  • 50
  • 11
  • "c:\\Repos\\kamyoncular\\app\\scripts\\templates\\root-layout" in the compiled template is almost certainly the problem. When you build on a Mac, the \\'s would be /'s – Robert Levy Sep 20 '15 at 14:49
  • I figured out that the compiled templates.js file must have only this["templates"]["templates\\root-layout"] instead of this["templates"]["c:\\Repos\\kamyoncular\\app\\scripts\\templates\\root-layout"]["js"]. But I could not find exact processName configration. – Ayberk Sep 20 '15 at 22:33

0 Answers0