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

匿名 (未验证) 提交于 2019-12-03 03:08:02

问题:

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


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!