javascript - Handlebars precompile type error

Question

I'm getting typeError in my handlebars precompiled templates

After looking around stackoverflow seems the issue is related to compatibility issues between the task compiler and handlebars version.

This is my handlebars version:

$ handlebars -v 2.0.0

$ handlebars postlist.hbs | grep "compiler" },"compiler":[6,">= 2.0.0-beta.1"]

The browser output of : handlebars.compiler_version is 6

I'm guessing this might be my problem but not sure how to upgrade my compiler to drop the beta. (?) [THIS SHOULDN'T BE A PROBLEM SINCE BOTH MATCH]

my grunt tasks doesn't throw any errors and the file is created:

$ grunt handlebars:compile

Running "handlebars:compile" (handlebars) task

1 file created.

Done, without errors.

This is my oneline js: var template = Handlebars.templates['postlist'];

This is the error i'm getting in console.log Uncaught TypeError: Cannot read property 'postlist' of undefined.

Please help!

This is my grunt file:

(function(){
  'use strict';
  module.exports = function(grunt) {

    // Global Vars
    var _globalConfig = {
      lessDir: '_less/',
      cssDir: 'css/',
      jsDir: 'js/',
      iconsDir: 'assets/icoMoon/SVG/',
      templateDir: 'temptpl/'
    };

    // Project configuration.
    grunt.initConfig({
      // Global Vars
      _globalConfig: _globalConfig,
      pkg: grunt.file.readJSON('package.json'),  

      // File Includes, https://github.com/vanetix/grunt-includes
      // TODO: set this up.
      includes: {
        files: {
          src: ['path/to/foo.html', 'path/to/bar.html'], // Source files
          dest: 'tmp', // Destination directory
          flatten: true,
          cwd: '.',
          options: {
            silent: true,
            banner: '<!-- Include File Location: <% includes.files.dest %> -->'
          }
        }
      },
      // Suit CSS Preprocessor
      suitcss: {
        options: {
          // Task-specific options go here.
          conform: false
        },
        your_target: {
          files: {
            '<%= _globalConfig.cssDir %><%= pkg.name %>-suit.dev.css': ['<%= _globalConfig.cssDir %>lib/site.css','<%= _globalConfig.cssDir %>lib/*.css'],
          }
        }
      },
      // Static Web Server
      nodestatic: {
        server: {
          options: {
            port: 9009
          }
        }
      },
      svgmin: {
        options: {
          plugins: [
            {
              removeViewBox: false
            }, {
              removeUselessStrokeAndFill: false
            }, {
              cleanupIDs: false
            }
          ]
        },
        dist: {
          files: {
            'img/svg-icons.min.svg': 'img/svg-icons.svg'
          }
        }
      },
      svgstore: {
        options: {
          prefix: 'Icon-',
          cleanup: ['fill','viewbox']
        },
        default: {
          files: {
            'img/svg-icons.svg': ['<%= _globalConfig.iconsDir %>*.svg'],
          },
        },
      },
      // Less Compiler
      less: {
        options: {
          ieCompat: true,
          sourceMap: true,
          sourceMapBasepath: '_less',
          outputSourceFiles: true
        },
        dev: {
          files: {
            '<%= _globalConfig.cssDir %><%= pkg.name %>.css': '<%= _globalConfig.lessDir %><%= pkg.name %>.less'
          }
        }
      },
      handlebars: {
        compile: {
          files: {
            // "<%= _globalConfig.jsDir %>lib/_templates.js": ['<%= _globalConfig.templateDir %>*.hbs']
            "<%= _globalConfig.jsDir %>temptpl.js": ['<%= _globalConfig.templateDir %>*.hbs']
          }
        }
      },
      watch: {
        css: {
          // Watches LESS file changes then triggers LESS compile
          files: ['<%= _globalConfig.lessDir %>**/*.less'],
          tasks: ['less:dev',]
        },
        suit: {
          // Watches Site CSS file for changes then passes to Suit-CSS preprocessor
          files: ['<%= _globalConfig.cssDir %><%= pkg.name %>-suit.css','<%= _globalConfig.cssDir %>lib/*.css'],
          tasks: ['suitcss']
        },
        svg: {
          files: ['<%= _globalConfig.iconsDir %>*.svg'],
          tasks: ['svgstore','svgmin']
        },
        hbs: {
          files: ['<%= _globalConfig.templateDir %>*.hbs'],
          tasks: ['handlebars']
        }
        // js: {
        //   files: ['<%= _globalConfig.jsDir %>**/*.js'],
        //   tasks: ['import:dev']
        // },
        // svg: {
        //   files: ['<%= _globalConfig.iconsDir %>*.svg'],
        //   tasks: ['svgstore','svgmin']
        // }
      },

    });

    // Load Plugins Found in package.json
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // Grunt Tasks
    grunt.registerTask('prepsvg',['svgstore','svgmin']);
    grunt.registerTask('suitup',['watch:suit']);
    grunt.registerTask('default', ['watch']);

  };
}());

Answer 1

Found the answer here: https://github.com/gruntjs/grunt-contrib-handlebars/issues/60

handlebars: {
    compile: {
        files: {
            "public/js/templates/templates.js": "public/js/templates/*.hbs"
        },
        options: {
            namespace: 'Handlebars.templates',
            processName: function(filePath) {
                var pieces = filePath.split("/");
                return pieces[pieces.length - 1].replace('.hbs', ''); 
                }
        }
    }
}