Geek Answers Handbook

The template was precompiled with an older version of Handlebars than the current runtime.

I have this error, but the difference between this question and my question is that I use gulp instead of grunt.

Firstly, my runbar runtime is handlebars v4.0.5 (js file).

The -v rudder output 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 is my problem?

Error:

Search error: the template was precompiled with an older version of the Pen than the current runtime. Upgrade your precompiler to a newer version (> = 4.0.0) or lower the runtime to an earlier version (> = 2.0.0-beta.1).

I precompiled the templates with the gulp command.

Thank you very much!

+6
source share
2 answers

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

Make sure you specify the steering wheel version in your package.json application:

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

Then you need to use the rudders, passing it as the gulp -handlebars parameter 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')); });
+13
source

Well, my problem was in the gulp -handlebars package, because in the package loader it loads a small version.

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

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

More articles:


All Articles