WAIT: Javascript errors after upgrading 1.3.7 -> 1.4b

Right after upgrading to v.1.4b, the same site now shows several javascript errors. Some of them are in my own code “jQuery not defined”, but the first error is for the Bricks native code that loads webfonts. Error is “Uncaught ReferenceError: WebFont is not defined”

Site is at https://kaya.infinitemonkeys.ca

Hi Eric,
I can’t reproduce the problem. Please try to remove your faulty code, maybe there is a conflict.

Best regards,
timmse

Backend editor does not load if I deque jquery from wordpress. Is jQuery required for the back-end editor? 1.4b

I’ve removed all custom code. The error still occurs.

I assume the error is because jQuery is not being enqued by WP and jQuery is probably required by some plugin. Bricks 1.4 does not loads jQuery any more. Enque jQuery and your problem should be solved.

Yep @omega , we are still working on removing jQuery completely. In the frontend this is as good as done (1.4beta), in the backend not yet completely.

1 Like

@timmse omega kinda hijacked my thread…just want to keep you focused on this issue with v.1.4…

@ainom My last message was directed towards you. Your website is not loading jQuery and that is why you are getting those console errors. Load jQuery and your problem will be sorted.

@omega I am not doing anything to NOT load jQuery, and in fact I can see jQuery does get loaded in the Sources panel:

This issue happened as soon as I upgraded to v.1.4, so it must be a bug in Bricks.

@ainom It seems the custom code in the header runs before jQuery is loaded causing the issue. Are you deferring the jQuery load to footer via perfmatters plugin?

@omega You’re right that the custom code is running before jQuery is loaded. I am able to resolve most issues by explicitly having each code snippet run from an external file (rather than inline) and using DEFER for each. I never used to need to do this.

It seems like the Bricks team has changed the way jQuery is loaded with v.1.4 (and not in a good way).

One problem remains…I have some code on certain pages that is added using a code element, so the code is right in the body, and obviously it’s impossible to defer this code execution.

For example, on one page is:

jQuery(document).ready(function( $ ) {
	$("#booking").hide();   
});

Code in a code element runs fine in v.1.3.7, but will not run in v.1.4. That’s the bug. It has something to do with how jQuery is now being loaded.

I’m really hoping the Bricks team would chime in and not be so opaque about what’s happening…acknowledge the bug and fix it!

@ainom Bricks 1.4 does not require jQuery any more on the front-end. Changelog – Bricks (bricksbuilder.io)

I guess that is causing the trouble for you. That code which you cannot defer or load from external file should be converted to plain js imo for now. Or load the jquery in head and not in footer via perfmatters.

I feel this issue is unrelated to Bricks. Previously your code might be working well as jQuery was being enqued by Bricks on front-end in the head? Anyways I will let the Bricks team chime in as they have more idea about what’s going on here.

@omega I see that “feature” in the changelog…but surely they wouldn’t have just removed jQuery from the front end without providing some option to keep it as it was? Otherwise this will break many, many websites and probably cause a complete shitstorm. I can translate into javascript (but I still prefer coding in jQuery) but jQuery is still relied on by many.

So no, I don’t believe it. The bug must be that the setting to disable jQuery is hidden.

@timmse please spill the beans…what’s going on here?

@ainom Wordpress still loads jQuery unless you deregister it. In your case I see the jQuery is loaded but it’s in the footer due to optimization you selected in Perfsmatter. Previously I believe jQuery might be loaded twice on your website once in the header and once in the footer so you never realized the issue. It is my guess.

@omega OK, good guess, but Perfmatters is not loading jQuery in the footer (there’s no option for that in Perfmatters). The issue still occurs even if Bricks is disabled.

There is. Notice “include jQuery”

@omega Check it out…it’s OFF:

And as mentioned, the problem is there when Perfmatters is disabled.

Hmm. Strange. Let’s wait for Stefan to reply.

Edit: There is no longer such js errors on your site. Not sure what change you made.

@omega I just converted the jQuery to javascript.

1 Like

Hi guys,
Sorry for the late reply.

First of all, we replaced every jQuery code in frontend.min.js with vanilla js (except for the form element, which is currently in progress). Quote from the changelog:

Remove JQuery (From The Frontend)

Bricks no longer requires any jQuery on the frontend. But a lot of plugins still do. So in order to benefit from this improvement make sure you have no other jQuery dependencies.

However, as Omega has already correctly pointed out, jQuery is loaded by WordPress by default - and we certainly haven’t changed that (and there is no hidden setting to do this within Bricks) :smiley:

So, for example, if I put the following code in Code Element, it works in 1.4 as well:

<script>
jQuery(document).ready(function(){
  jQuery(".my-heading").addClass("blue");
}); 
</script>

<h1 class='my-heading'>Just some custom HTML</h1>

It is extremely difficult to understand what led to your problem, but a reference error usually means either an undeclared variable or a wrong scope/order. And now it is quite difficult to say anything about it, because you have already solved the problem yourself. So far, however, we have no reports of any jQuery problems - except yours.

Best regards,
timmse