Template was precompiled with an older version of

问题:

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!!

回答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'));
});

回答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"
  }