Template was precompiled with an older version of Handlebars than the current runtime

Question

I have this error, but the different between this question and my question is that I'm using gulp instead grunt.

First, my handlebar runtime is handlebars v4.0.5 (js file).

The output of handlebar -v is 4.0.5

This is my gulpfile.js:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var handlebars = require('gulp-handlebars');
var wrap = require('gulp-wrap');
var declare = require('gulp-declare');
var concat = require('gulp-concat');

gulp.task('default', ['templates','scripts'], function () {

});

gulp.task('templates', function () {
    gulp.src('templates/*.hbs')
      .pipe(handlebars())
      .pipe(wrap('Handlebars.template(<%= contents %>)'))
      .pipe(declare({
          namespace: 'MyApp.templates',
          noRedeclare: true, // Avoid duplicate declarations
      }))
      .pipe(concat('templates.js'))
      .pipe(gulp.dest('js/dist'));
});

gulp.task('scripts', function () {
    return gulp.src([
     'bower_components/handlebars/handlebars.runtime.js',
     'bower_components/jquery/dist/jquery.js',
     'bower_components/bootstrap/dist/bootstrap.js',    
     'js/dist/templates.js',
     'js/main.js'])
      .pipe(concat('bundle.js'))
      .pipe(uglify())
      .pipe(gulp.dest('js/dist/'));
});

Main.js

"use strict";
var data = { title: 'This Form', name: 'Joey' };
var html = MyApp.templates.hellotemplate(data);
// console.log(html);

$(document).ready(function () {
    $('#dynamic-content').html(html);
});

Where can be my problem?

Error:

Uncaught Error: Template was precompiled with an older version of Handlebars than the current runtime. Please update your precompiler to a newer version (>= 4.0.0) or downgrade your runtime to an older version (>= 2.0.0-beta.1).

I have precompiled the templates using gulp command.

Thank you so much!!

Answer 1

There is a better way to compile a template using a specific version of handlebars which is covered in the README: https://github.com/lazd/gulp-handlebars#compiling-using-a-specific-handlebars-version

Make sure you've specified the handlebars version in your app's package.json file:

{
  "devDependencies": {
    "handlebars": "^4.0.5"
  }
}

Then require handlebars by passing it as a gulp-handlebars option in your gulpfile:

gulp.task('templates', function () {
  gulp.src('templates/*.hbs')
    .pipe(handlebars({
      handlebars: require('handlebars')
    }))
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
      namespace: 'MyApp.templates',
      noRedeclare: true, // Avoid duplicate declarations
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('js/dist'));
});

Answer 2

Ok, my problem was in the gulp-handlebars package, because in the package loader, it is loading a minor version.

I update it manually and I solved my problem. Go to node_modules folder, find gulp-handlebars folder, open package.json, and update the dependicies like this:

"dependencies": {
    "gulp-util": "^3.0.4",
    "handlebars": "4.0.5",
    "through2": "^0.6.3"
  }