Beaver Builder throwing a JS error

General Discussion
1

I am using Beaver Builder v. 2.8.1.3 (the latest as far as I know) on the latest CP nightly and some of the elements of the builder when editing a page do not show (to be precise the page shows but the bars where one can do beaver builder action do not).

It is a JS issue. I tried disabling all of the plugins and the issue persists.

jQuery.Deferred exception: wp.template is not a function setupMainMenuData@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-history-manager.js?ver=2.8.1.3:162:16
init@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-history-manager.js?ver=2.8.1.3:33:9
@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-history-manager.js?ver=2.8.1.3:242:27
e@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30038
Deferred/then/l/</t<@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30340 undefined jquery.min.js:2:31593

Aside from going in myself to see what the issue is (I am going to do so and report) I was aware that Beaver Builder devs where aware of ClassicPress and said they were going to support it, so I will write to them also to let them know.

Will post here if a find a fix myself.

2

The culprit is from line 139 of that file when there is the function to add the activity history in the menu for undo/redo. from line 139 on for three times there is some labels that have wp.labels in it and it does not recognize it. I was thinking it could be a typo and tried to correct to no avail. Since it is JQuery that I am not so savvy about I am going to point out to Beaver Builder devs that and let them fix it.

3

To follow up on this I tried on a new CP instance with only beaver builder installed, latest CP nightly and Twentyfifteen CP Child Theme.

I get this list of JS errors in console:

downloadable font: no supported format found (font-family: "Genericons" style:normal weight:400 stretch:100 src index:1) source: (end of source list)
downloadable font: Glyph bbox was incorrect (glyph ids 13 25 32 39 63 110) (font-family: "Genericons" style:normal weight:400 stretch:100 src index:0) source: data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAADgYAA0AAAAAWDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAA3/AAAABoAAAAc … nRV3VtxZcWfFnRV3VtpD3zVmt9lj9pqrzNVmn7nG7O+kuyzusrjL4i6LuyzusrjLUjVvAQpVcTgAAAAAAAAB//8AAnjaY2BgYGQAgjO2i86D6AshzNIwGgBAmQUAAAA=
onmozfullscreenchange is deprecated. fl-builder-ui-iframe.js:211:26
onmozfullscreenerror is deprecated. fl-builder-ui-iframe.js:211:26
jQuery.Deferred exception: can't access property "model", wp.media is undefined _initMediaUploader@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder.js?ver=2.8.1.3:482:4
_init@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder.js?ver=2.8.1.3:346:14
@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder.js?ver=2.8.1.3:10968:13
e@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30038
Deferred/then/l/</t<@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30340
 undefined jquery.min.js:2:31593
jQuery.Deferred exception: wp.template is not a function init@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-ui-panel-content-library.js?ver=2.8.1.3:617:32
init@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-ui-panel-content-library.js?ver=2.8.1.3:43:35
init@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-ui-panel-content-library.js?ver=2.8.1.3:778:21
@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-ui.js?ver=2.8.1.3:1200:32
e@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30038
Deferred/then/l/</t<@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30340
 undefined jquery.min.js:2:31593
jQuery.Deferred exception: wp.template is not a function setupMainMenuData@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-revisions.js?ver=2.8.1.3:39:19
init@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-revisions.js?ver=2.8.1.3:19:9
@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-revisions.js?ver=2.8.1.3:256:28
e@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30038
Deferred/then/l/</t<@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30340
 undefined jquery.min.js:2:31593
jQuery.Deferred exception: wp.template is not a function setupMainMenuData@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-history-manager.js?ver=2.8.1.3:162:16
init@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-history-manager.js?ver=2.8.1.3:33:9
@https://elica-webservices.it/wp-content/plugins/beaver-builder-lite-version/js/fl-builder-history-manager.js?ver=2.8.1.3:242:27
e@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30038
Deferred/then/l/</t<@https://elica-webservices.it/wp-includes/js/jquery/jquery.min.js?ver=3.6.3:2:30340
 undefined jquery.min.js:2:31593
downloadable font: no supported format found (font-family: "Genericons" style:normal weight:400 stretch:100 src index:1) source: (end of source list)
The resource at “https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. eli-ca-web-services
The resource at “https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. eli-ca-web-services

Basically from my investigation it seems that deferrer error is due to some incorrect dependecies being enqued wrongly that fire too late. (wp.media and wp.utils seems to be the issue). Furthermore there is a problem with Genericons and an issue with the way Beaver Builder detects fullscreen that is deprecated.

This results in the error occurring when the plugin tries to add actions to the undo/redo menu button in the top Beaver Builder toolbar in editing mode (front-end).

I suspect that the way ClassicPress handles JQuery might come into play since JQueryUI has being replaced with Vanilla JS in many places thanks to our core devs.

I would like to stress out again that Beaver Builder is a fantastic page builder (much better than its competitors IMHO) and it would be great if it could continue to support both ClassicPress and WordPress.

Hope these new details help in troubleshooting and fixing this issue.

4

Your suspicion about the way CP handles jQuery is misplaced.

CP hasn’t changed anything at all about jQuery.

In v2.1, we shall be dropping all use of jQuery UI in core, but (a) that has nothing at all to do with jQuery itself and (b) jQuery UI remains bundled with CP and so available to any plugin that wants to use it.

1 Like
5

In the list of things your console reports, a deprecation doesn’t mean it doesn’t work now. It means it might not work with an update in future. And those deprecations aren’t coming from CP anyway. They are coming from your browser.

1 Like
6

The real issue is that BB is looking for two scripts that are blocks-related. As CP doesn’t have blocks, it can’t find them. That’s it.

7

Thanks for the heads up and explanations @timkaye!

About the two functions that break the plugin, this might then be a problem because they would need to have functions for CP and WP in the plugin to continue supporting both.

On a side note reverting to a prior version that handles things differently then could solve the issue (posing at the same time all security risks that are linked with using outdated software).

On WP forums they closed my support ticket stating they would reply here. Let’s wait to see if they can do something about that and if not a possible solution is me coding my own shortcodes library with my own design system and styles to develop CP sites faster. Code once, reuse many times.

8

An older version should work, and it’s not necessarily a security risk. It might be they made the change simply to make BB more compatible with blocks.

It’s also possible that the issue might be resolved by running a check on whether BB is running on WP or CP and then using the old or the new code as appropriate.

9

That idea popped in my head, I could find the old code in the plugin (should be in the same place the new is, correct?) and add it to the current version with the check to detect CP or WP use.

This might mean amending the plugin every time it upgrades to a new version overwriting my amend but it’s doable.

10

Exactly! Or you could show it to the BB devs and get them to use it.

If you’re on Linux, there’s a program called Meld that will enable you to compare the contents of different files.

2 Likes
11

I do have meld… Good idea. I’m going to work on the patch and post it here

12

The truth is I am testing the older versions, so far the one I am at (2.6.x) won’t work, same error. So I need to go back more. To use meld I need a version that has the code working for CP and the updated one. Then I will need to find the code and apply it to a updated version on test environment to see if with the check and all it explodes or not. But I am going to get there.

13

Jus to follow up, all the Beaver Builder v2 releases have been amended with blocks code and do not work (same errors).

V. 1.11 is the last one working and sports the old toolbar and it is really very outdated and I think not supported anymore with security patches since they are now at v2.8.3.

Will try to find the code anyway even if it is going to be tricky for the fact that it goes so back that other changes have occurred too, like the new toolbar that is different from that one.

14

Sorry you are having issues, I will look into it tomorrow. It used to work fine with CP 2.0 ive been using it on my site since alpha!

2 Likes
15

Well, in WP and CP <2 there is a JS wp object and that has a template function. wp.template, this is not here now. So we get the fatal JS errors. Also BB uses the WP media modal for selecting images uploading and editing of images, this is also not being loaded. Im not sure we can fix this. Surely other plugins use wp.template? @timkaye any ideas?

16

Thanks for looking into this.

I think it can be fixed as Tim explained above (with a check to verify if WP is in use that fires the corresponding CP functions instead of the WP ones).

The version 1 series does work with CP with no errors, so it includes the right functions for CP. I was inspecting the files to see if I could retrieve the specific code that needs to be placed with the check in version 2 series. It is a huge task because files have changed a lot (and that is understandable) and there are files that do not exist and other that are new in v2 of the plugin in comparison with v1.

I think I might have more luck looking at the changelogs along my inspection of the files diff (using meld for that) so I will also search there to see if I am able to catch the version where the change happened (my tests resulted on me finding that it works up to v1.11 but I have to see if early v2 series versions do work, even if I think it’s unlikely).

I will let you know if I find something.

17

This was working fine until recently, recent as in pre 2.0 release. We added this code for CP 1.x which worked fine until 2.0 final, something changed.

		// React polyfill for older versions of WordPress.
		if ( version_compare( $wp_version, '5.2', '<=' ) || function_exists( 'classicpress_version' ) ) {

			// React
			wp_deregister_script( 'react' );
			wp_enqueue_script( 'react', "{$js_vendors}react{$vendor_tag}.js", array(), $ver, true );

			// React-DOM
			wp_deregister_script( 'react-dom' );
			wp_enqueue_script( 'react-dom', "{$js_vendors}react-dom{$vendor_tag}.js", array(), $ver, true );

			// @beaverbuilder/app-core
			$app_core_deps = array( 'react', 'redux', 'react-router-dom' );
			// @beaverbuilder/fluid
			$fluid_deps = array(
				'react',
				'react-dom',
				'redux',
				'react-router-dom',
				'framer-motion',
				'react-laag',
				'bb-icons',
			);
			if ( ! wp_script_is( 'wp-i18n', 'registered' ) ) {
				wp_enqueue_script( 'fl-wp-i18n', "{$js_vendors}i18n-polyfill.js" );
			}
		}

We use wp_enqueue_media() to load files needed to load the WP media modal on the front end, this is all broken too.

1 Like
18

As I suspected, this issue is a product of the re-fork rather than of any PRs submitted since. Though I’m surprised that calling wp_enqueue_media() explicitly doesn’t work.

I’ll take a further look at this, but I won’t be able to get to it before the weekend at the earliest.

3 Likes
19

@Pross that was the code I looked into at first, I am a very junior dev but that code seemed alright (that is why the first idea I had was that the problem was CP core changes introduced by nightly v2).

@timkaye thanks for looking into this! Let me know if there are checks I can do myself on a fresh install so that I can help get to the bottom of the issue.

20

I think we are going to have plugins and other add-ons fall into this gray area more often as the developers upgrade. ClassicPress is not just WP with the Classic plugins enabled, so it gets tricky. It would be nice if CP could do anything WP can except blocks, but obviously it is not quite that simple.

1 Like