So the Developer Tools on your browser shows many “Uncaught ReferenceError” when using visual builder. This happens when you want to edit a post using a visual builder in WordPress, e.g Divi Builder. But then, you only get a blank screen. And the indicator keeps spinning endlessly. If that’s the case, then this article might be your answer.

DifficultyMedium
ToolsBrowser’s Dev Tools
Requirement
  • Access to /wp-admin
  • Access to Cloudflare Account

To confirm further, please check the list below:

  • Is Cloudflare active for your site?
  • Are you enabling the mighty “Rocket Loader”?
  • Does your front-end seem normal / no error message?
  • Is editing a post with “Default Editor” (not visual builder) seems normal as well?
  • Does the exact error message read “Uncaught ReferenceError: jQuery is not defined“? — And, you probably also get some other error message. (The other error message are not really important for the time being)

If you answer “Yes” to all of the items above, then keep reading.

"Uncaught ReferenceError" when using Visual Divi Builder
“Uncaught ReferenceError” when using Visual Divi Builder

Please note, this article will mention details from Elegant Themes’ visual builder i.e: Divi Builder. However, the solution and the mechanism can be valid for any other visual builders out there.

Understanding the “Uncaught ReferenceError” when using Visual Builder

The real reason for the error is that because of the javascript library called ‘jQuery‘ was not loaded in time — or not loaded at all.

So, why is everywhere else fine (no error, behave as normal, looks normal)? Because:

  • Cloudflare and its awesome Rocket Loader are trying to load all the script and style as fast as possible so your website can be delivered faster. And they are doing a very good job on this.
  • The visual builder, including Divi Builder, uses a lot more script when editing a post. Imagine, many additional script and module being loaded at the same time as fast as possible.
  • And many if not all of those scripts required the jQuery to function.
  • So the optimization process usually involves combining few small files into one and minification (removing blank space, comment, etc) This process is not straight forward as imagined. So, if the sequence is wrong, or the style of programming is not right, then it might break the functionality.
  • Not to mention that the jQuery core file is quite big (e.g version 1.12.4 is around 33kb) While those many small files relatively smaller in size. So, it is possible and logical for the smaller file to get sent, downloaded and run first and you get the “Uncaught ReferenceError” using Visual Builder.
  • In the front-end, since the number of scripts is way less, the optimization process can usually avoid a similar problem – not always though.
  • Hence, with this premise in our mine, let’s confirm it by turning off the Cloudflare optimization process. (Referred to as “Performance” feature)

Pausing Cloudflare -temporarily

Login to your Cloudflare account. Then, click the domain that you are working on. And find “Advanced Action” heading (under “Overview” menu). You will find a link “Pause Cloudflare on Site.”

Then, click that link. Cloudflare will ask for confirmation. Just press “Confirm” and the text should change to “Enable Cloudflare on Site.”

Now your site is “naked”, i.e.: Cloudflare is non-active. After purging your cache (very important!), try again to edit any post. Do you get the same “Uncaught ReferenceError” when using Visual Builder?

If you still experiencing the problem, do these items first before considering that you have totally different problem:

  • Clear your cache. I meant, *ALL* your cache: the browser’s cache, website’s cache and Cloudflare’s cache.
  • Also, check with the Developer Tools that rocket loader is actually not listed (Click on “Network”)

So, temporarily disable the Cloudflare make your problem disappear? If yes, then we do have a better solution.

Turn it back on. Create the Page Rule!

“Page Rule” is a facility from Cloudflare to set different features for a different page, based on the URL. Even the free account has this capability (limited to 3-page-rules, but you can buy more if needed)

First Step: Find the unique URL “token” that activates the visual builder

You can go to the “All Post” page. Then, look at the URL link label “Edit with Divi” for any post. You should see one of the 2 variations below:

[your-domain]/[permalink/?et_fb=1&… (published post)
[your-domain]/?p=[99]&et_fb=1&… (unpublished post)

You can go to the “All Post” page. Them, look at the URL link label “Edit with Divi” for any post. You should see one of the 2 variations below:

[your-domain]/[permalink/?et_fb_activation_nonce=[random-string]&…
[your-domain]/?p=[99]&et_fb_activation_nonce=[random-string]&…

(Look like the first one is a variation for “Extra” theme and the second one comes from “Divi” theme)

So, in this finding, we found our token. It is that “et_fb=1” -or- “et_fb_activation_nonce=“. And we can go to the next step.

Create a page rule to disable Cloudflare features on that particular URL

We go back to Cloudflare. First, you need to re-enable the site. Then, click the “Page Rule” menu on the top and click “Create Page Rule”

In ” If the URL matches” insert the token we found previously, i.e.:

[your domain]/*et_fb=1*  -- or --
[your domain]/*et_fb_activation_nonce=* 

In ” Then the settings are” set:

  • Disable Performance
  • Always Online = Off
  • Security Level = High
  • Cache Level = Bypass
  • Disable Apps
  • Browser Integrity Check = “On”
  • Browser Cache TTL = 30 minutes (the lowest possible)

To activate click “Save and Deploy“. That’s it. Done.

For further info on page rule. Click this knowledge base and tutorial.

So, now whenever you are using the visual builder, Cloudflare will not be bothering you again. All scripts will be loaded one by one in sequence accordingly. A bit slower, but in this complex sequences, it is the correct one.

CloudFlare and WordPress