Uncaught ReferenceError: $ is not defined

If I do not included a CDN for jQuery (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js) many of my functions receive the subject error referencing the first line of the code. I have many custom functions on my website and if I rely on Webflow’s version of jQuery most of my site breaks.

Is there something I need to do to my functions to allow them to be compatible with Webflow’s version of jQuery or am I forced to load two versions of jQuery.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You do not need to load jquery (Webflow already load this asset) ==> Could be buggy.

In general, you should put any jquery before body (Not inside the head (before jquery load) -or- Not as embed code (same idea)) (You find some code ideas to work around this problem - Related stackoverflow Q - but no reason (It’s really better to put all of your Custom JS code before body).

If I do not include my own instance of jQuery my console demonstrates that something isn’t right. Also I cant put all of my code in the before body because of the 50,000 character limit.

image

@QA_Brandon Wondering if Webflow has insight into the errors caused when JS is placed inside of the HTML Embeds in the Navigator section of the Designer and a separate instance of jQuery isn’t loaded in?

Why does code not placed in before < body > only work if I CDN in a seperate instance of jQuery? Additionally, I am curious why there is a character limit in the before < body > for each page when I can place multiple embed’s at the bottom of the Navigator page that together exceed the limit. Why not allow for more characters in before < body >?

is simple, if you set an embed, your code will be output before the jquery script that is output as one of the latest body elements. So they will be executed before jQuery is actually loaded.

The code executes fine in the embeds if I put the CDN here:

Does Webflow load their version of jQuery differently than this?

No is the same way, but browsers read from top to bottom, so your scripts are read and executed before the jquery injected by webflow is executed, hence the error

@QA_Brandon Is there a workaround for this? I don’t want to have to load two instances of jQuery.

1 Like

Kyle,

I have inquired with our SAI team about updating to ver. 3.5.1 and it is something they are looking into. With COVID, we have had delays in updating libraries. But This is something they do want to do. The 3.4.1 library is still useable and you do not have to load your own JQuery library though.

Have a Great Day and Happy Designing,
~ Brandon

1 Like

Brandon,

Your jQuery really needs to be updated soon for security reasons. Our website is failing McAfee Secure because the jQuery 3.4.1 has issues that need to be addressed. Here is the message which I am sure is important to all.

jQuery Prior to 3.5.0 Cross-Site Scripting Vulnerability

About

JQuery is prone to a cross-site-scripting vulnerability because it fails to sufficiently sanitize user-supplied input.

Affected Versions:
jQuery versions greater than or equal to 1.2 and before 3.5.0.

QID Detection Logic(Unauthenticated):
It checks for vulnerable versions of jQuery from default web page.

Solution

Upgrade jquery to version 3.5.0

Samir

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.