Visual Composer Doesn't Load And Gives Typeerror: _.template(...).trim Is Not A Function

My visual composer plugin doesn't work. It stuck on the loading page. And it gives an error 'TypeError: .template(...).trim is not a function' Error is on this line of code: this.$

Solution 1:

If you are unable to solve this error by upgrading or downgrading your theme or plugin, you could at least make the below changes.

1. Open the following two files:

wp-content\plugins\js_composer\assets\js\frontend_editor\frontend_editor.js
wp-content\plugins\js_composer\assets\js\frontend_editor\custom_views.js

2. Replace

this.$controls = $( _.template( template, data, vc.template_options ).trim() ).addClass( 'vc_controls' );

with

this.$controls = $( ( "vc.template_options" ).trim() ).addClass( 'vc_controls' );

This will surely work.

Solution 2:

Solution Goto file /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js around line 4045:

======> Replace the code

html2element: function(html) {
    var $template, attributes = {},
        template = html;
    $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
        attributes[attr.name] = attr.value
    }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
},

Solution 3:

Upgrade to Visual Composer version 4.11.2+

Note Wordpress 4.5 compatibility was fixed on 13th April: https://wpbakery.atlassian.net/wiki/display/VC/Release+Notes

Solution 4:

You should try to fix this by up/downgrading your theme/plugin. But if you, like me, can't solve it this way and just need to do a quick hack to get past this particular problem, the following worked for me.

Edit the following two files:

wp-content\plugins\js_composer\assets\js\frontend_editor\frontend_editor.js
wp-content\plugins\js_composer\assets\js\frontend_editor\custom_views.js

Change a single line in each of them, adding (). Change:

this.$controls = $( _.template( template, data, vc.template_options ).trim() ).addClass( 'vc_controls' );

to:

this.$controls = $( _.template( template, data, vc.template_options )().trim() ).addClass( 'vc_controls' );

Solution 5:

As Shady sherif said at Maulik's suggestion, this is what I've changed in 2 places at frontend-editor.min.js and it worked!! Thanks to you both!

Change this:

this.$controls=$(_.template(template,data,_.extend({},vc.template_options,{ evaluate:/\{#([\s\S]+?)#}/g})).trim()).addClass("vc_controls");  

With this:

this.$controls=$(("vc.template_options").trim()).addClass("vc_controls");