Visual composer doesn't load and gives TypeError: _.template(...).trim is not a function

Question

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.$controls = $(.template(template, data, vc.template_options).trim()).addClass('vc_controls');

Please help me to fix this out.

Here is the error which I get:

score 23 · Answer 1 · edited Dec 19 '20 at 22:47

23

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.

edited Dec 19 '20 at 22:47

montrealist

5,593
12
46
68

answered Aug 08 '17 at 19:45

maulik

919
7
22

you saved me! it was `this.$controls = $( _.template( template, data, _.extend( {}, vc.template_options, { evaluate: /\{#([\s\S]+?)#}/g } ) ).trim() ).addClass( 'vc_controls' ); ` – Shady Mohamed Sherif Sep 18 '17 at 18:26
1

this should be the correct answer. fixed my problem on Wordpress 4.9.x – williamli Feb 10 '18 at 06:20
1

Please do not alter third-party code. It will be overwritten when/if you update. – Ethan C Mar 29 '19 at 15:20
Yes, you right, But this solution will be useful when your plugin is updated & then after it shows the error.So no issue if you updated code & hope next update of plugin will resolve this in upgraded versions :-) – maulik Mar 30 '19 at 04:34
Meanwhile, we guys are don't be depended on VC composer's response & get instant solution. – maulik Mar 30 '19 at 04:36
This prevented the error, but functionally did not work for me. I've added my solution as an answer. – Captain Normal Apr 24 '19 at 17:03

score 8 · Answer 2 · answered Apr 25 '16 at 19:49

8

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()
},

answered Apr 25 '16 at 19:49

Amritosh pandey

404
4
11

1

This is a working, temporary fix, if you're not able to update Visual Composer to the latest version. – René Stalder May 13 '16 at 13:32
I was just having this same problem and this solved it. Thank you very much! – nickhiebertdev Jul 11 '18 at 15:59
Glad to hear that @nickdevyyc – Amritosh pandey Jul 12 '18 at 04:59

score 6 · Answer 3 · answered Apr 18 '16 at 09:25

6

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

answered Apr 18 '16 at 09:25

Natacha Beaugeais

1,003
1
11
24

thats right upgrade is best option. I have purchased new key and updated manually. – Sanjay Goswami May 13 '16 at 07:57
definitely the correct answer. I'm unsure why visual composer wasn't reporting a new version was available. – Barry Sep 26 '16 at 14:40

score 4 · Answer 4 · answered Apr 24 '19 at 17:09

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' );

This worked for me. Maulik's solution at the top made the page load, but VC didn't work any more. You couldn't edit elements. With this solution you can. — Rick, Jul 28 '20 at 01:32

score 1 · Answer 5 · answered Jan 30 '18 at 08:12

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");

Paulo Boaventura · Answer 6 · 2019-11-18T02:51:19.767

UPDATE: in current updates none of this is needed just replace the plugin

I had problem with WPBakery Page Builder in version 6.0.2.
Wordpress: Version 5.2.1

ERROR: Uncaught TypeError: window.vc.frame_window.jQuery is not a function at window.vc.ShortcodesBuilder.buildFromContent (frontend-editor.min.js? Ver = 6.0.2: 10)
     at Object.vc.build (frontend-editor.min.js? ver = 6.0.2: 10)
     at frontend-editor.min.js? ver = 6.0.2: 10

I was reluctant to upgrade, as there might be a bug. (But it is a fact that an update is bug fix)

Since the update to version 6.0.3 was not successful.

Solution:

Mine was restoring the backup of the whole site.

Tip: Never forget Backup.

Ian Poston Framer · Accepted Answer · 2016-04-18T17:16:33.493

This article suggests rolling back your worpress version prior to 4.5. http://forums.artbees.net/t/urgent-wordpress-4-5-broken-vc-backend-editor-workaround-fix-in-comments/2734

This is where you can find older versions of wp to install https://wordpress.org/download/release-archive/30

I haven't tried this myself just a suggestion.

If this is still a problem for you I solved this same error I was getting by manually updating my theme through ftp. I downloaded the latest version of the theme because automatic updates were not working. I kept wordpress version 4.5. Here are the steps I took as follows.

I renamed the theme example x-updating once uploaded named the current theme x-previous then changed x-updating to x and deleted x-previous.
I updated js_composer the same way as step 1. Uploaded latest version of js_composer which was bundled with the theme. This is updated in plugins outside the theme. At this point you should be able to update visual composer from the wp dashboard if it hasn't already.
This got vc working again but left me with some weird errors happening in vc_templates vc_column.php file. I had to manually comment out the trouble code to get the errors to go away.

These 3 steps are a little nerve racking if you are not familiar with uploading files directly to your public_html root directory of your website. Some themes may offer support and do the ftp uploading for you if you provide them with ftp username password.

One more thing to do is clear your cache for your website. In chrome you can clear your cache by going to chrome://settings/cookies enter website.com in the search bar and click remove all clearing all locally stored data for your website. Manual updating themes and plugins is recommended only if auto updates aren't possible then you do the above. For my theme and this same exact error in question I followed these really well-done steps https://community.theme.co/kb/updating-your-theme-and-plugins/. However this will be different depending which theme you have. And if you would rather roll back your wp version you can follow my original suggestion. But for me I like to have everything new and up-to-date.

One more important note if you do have this theme then I had to delete x-shortcodes plugin from plugins direcotry of my website because my updated theme uses cornerstone instead of x-shortcodes to process important shortcodes to make vc work properly. Another thing to know is none of your data should be harmed while uploading plugins and themes all the data/content is stored safely in your data-base not in your theme.

instead of trying to downgrade and limit yourself to an old version of wordpress which will lead to a lot of security problems, you should try the solution posted by @maulik below. — williamli, Feb 10 '18 at 06:20
Thanks. I already mentioned that in my answer. "I like to have everything new and up-to-date." No need to downvote something that obviously can help some people and I never said to roll-back I said its a possibility and obviously other people have suggested doing that by the articles I listed. — Ian Poston Framer, May 30 '18 at 19:52
If you're thinking of downvoting my original answer please keep in mind it might have been the best solution when I wrote it in 2016. There have been 2 years to have much better solutions and I don't think it's fair to downvote history considering somebody liked my answer at the time. Just ignore it and go to a better solution. And try to understand how to downvote correctly. This isn't Reddit. — Ian Poston Framer, May 30 '18 at 19:56

score 0 · Answer 8 · answered Apr 26 '18 at 10:29

I tried the following solutions:

maulik`s (but there was no such files on my plugin folder - frontend_editor.js and custom_views.js, just a "vendors" folder on "/wp-content/plugins/js_composer/assets/js/frontend_editor"),
Amritosh pandey`s solution (does not work even after cache & history cleaning),
Berein`s solution (does not work too).

I solved the problem by using a Amritoshpandey's solution: https://gist.github.com/levantoan/519bb0d42c9f7bd6c4d78ef1686bb848 ("The following code has completely corrected my problems, I can load the page, add, clone, remove, etc")

The Amritoshpandey's code should be pasted in /wp-content/plugins/js_composer/assets/js/dist/backend.min.js instead of:

render:function(){var $shortcode_template_el=$("#vc_shortcode-template-"+this.model.get("shortcode"));if($shortcode_template_el.is("script"))this.html2element(_.template($shortcode_template_el.html(),this.model.toJSON(),vc.templateOptions["default"]));else{var params=this.model.get("params");$.ajax({type:"POST",url:window.ajaxurl,data:{action:"wpb_get_element_backend_html",data_element:this.model.get("shortcode"),data_width:_.isUndefined(params.width)?"1/1":params.width,_vcnonce:window.vcAdminNonce},dataType:"html",context:this}).done(function(html){this.html2element(html)})}return this.model.view=this,this.$controls_buttons=this.$el.find(".vc_controls > :first"),this},

score 0 · Answer 9 · edited Apr 26 '18 at 12:53

0

If you have Visual Composer 4.9, just replace these 2 files from archive - frontend-editor.min.js - backend.min.js

path: /wp-content/plugins/js_composer/assets/js/dist

Don't forget to make a backup of your files.

https://yadi.sk/d/JH4cbtnH3UoU3F

click "download add" (tested with VC 4.9 & WP 4.9.5)

edited Apr 26 '18 at 12:53

Deb

2,922
1
16
32

answered Apr 26 '18 at 12:30

Alex Paray

11

score 0 · Answer 10 · answered Sep 03 '20 at 14:58

I used version 4.10 and upload the file assets/js/frontend-editor.min.js to the same file in 4.12 version.

Note: I keep my version and update only this file. I things this issues risen after update my php version, but i dont sure about that.

That`s work fine.

I get this file here: https://www.downloadfreethemes.io/visual-composer-v5-0-1-page-builder-for-wordpress/

I have theme license.

score 0 · Answer 11 · answered Feb 18 '21 at 16:47

Replacing file

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

is not a solution, you can download cracked version and resolve it: https://www86.zippyshare.com/v/fguQVId6/file.html

score -3 · Answer 12 · answered Apr 18 '16 at 12:56

-3

1.Please Deactivate the plugin 2.Delete all the files from plugin folder (js_composer folder) 3.Download the Latest Version of Visual Composer 4.Add new Plugin --> and select the downloaded plugin -->Upload --->Activate

answered Apr 18 '16 at 12:56

Anand

163
2

Or simply replace it via FTP. – Gummibeer Jun 02 '16 at 10:29

Visual composer doesn't load and gives TypeError: _.template(...).trim is not a function

12 Answers12

Since the update to version 6.0.3 was not successful.

Solution:

Tip: Never forget Backup.

Linked