ReferenceError: $ is not defined after impulse theme upgrade

Technical Q&A
1

Hi,

Our store is using Impulse theme. I recently upgraded to version 4. Store URL is https://indiquehair.com/

AishwaryaI_0-1628871475401.png
AishwaryaI_0-1628871475401.png1325×140 10.6 KB

Version history says jQuery is removed and rewritten so why I am getting this ReferenceError: $ is not defined.

Manually adding jQuery file can solve the problem but it it will increase redundancy.

How can I solve this? Please help.

2

Hi,

Try to add your custom JS in the following file that is “theme.min.js” at very bottom of this file.

I think it will solve the issue.

3

@Anonymous

This error simply means that you’re using jQuery but it is not present. If jQuery is indeed installed, you are loading your jQuery custom code before jQuery is properly loaded.

What I’d personally do in a case like this is making the custom code async.
This way you can wait for jQuery to load and only afterwards run your own code:

(async () => {
    while(!window.hasOwnProperty("jQuery")){
        await new Promise(resolve => setTimeout(resolve, 50));
    }
    console.log("jQuery is loaded. Run custom code below.");
})();

Note that this is a fairly crude solution that may need to be enhanced/adapted for your specific case. You may want to break the “while” loop after a certain number of tries.

Kind regards,
Diego

4

Hi,

Or you can add your custom code inside the setTimeout function.

setTimeout(function(){

//Your custom code.

}, 3000); //3000 means 3 second.

So, the above code will execute after 3 seconds. But you can specify your time (seconds).

5

Hi,

I am doing the same job right now for a client that asked me to upgrade Impulse 3.x to 4.x and yes, you are right, JQuery is not used anymore on Impulse since 4.x.

Now, the first thing you can do to fix the store and not break it is to add jQuery again.

So download the latest version of jQuery minified, add to the asset folder of you theme and add the following line of code to theme.liquid inside block

Of course by adding this dependency you slow down the website.

I have also to warn you that many Shopify apps still relies on jQuery.

Some of them add their version, other give for granted that jQuery is used in your theme.

I suggest you to create a clone of your theme and start debugging it in Preview mode to search which Javascript code still depend on jQuery and try to convert it to vanilla JS.

6

Thanks for the solution. Almost all above mentioned solutions works but there are chances they may fail for any browser or version. Some of the code I already did in vanilla JS. But I prefer not to touch 3rd party apps code.

As I found that $(document).ready(function(){}); equivalent in JS has browser compatibility issue in some forum answers. So I have decided to add the jQuery file again.