Magento 2 Uncaught Referenceerror jQuery is not defined

In this article, you going to see how to Solved Magento 2 Uncaught Referenceerror jQuery is not defined in a detail and step by step with a code snippet.

If you are looking for this topic then you are at right place.

Let’s start with the topic to fix Magento 2 Uncaught Referenceerror jQuery is not defined

In case of Magento 2, during the custom development many time user face error given as below.

Uncaught ReferenceError: jQuery is not defined(anonymous function).
Uncaught TypeError: $(…).customjs is not a function.

Now we going see how to fix these error.

Using require js paths and shim attribute of require js issue fixed easily.

This issue occur most of the time.

As not loading of jQuery.

Before our custom js file due to AMD require js nature.

What is AMD?

AMD is asynchronously module dependencies.

Many Third party js library or called custom js.

It is completely depends on jQuery to load first.

Magento team for improving site speed mainly using the require js.

So it is very important to add dependencies in the file called requirejs-config.js file as given below.

With the help of example we going to check this.

Assume the example of slider js whose name is myslider.min.js and completely depend on jQuery.

Below is code snippet for the file called requirejs-config.js file.

var config = {
    paths: {
            'myslider': 'Vendor_Module/js/myslider.min'
    },
    shim: {
            'myslider': {
                deps: ['jquery'] //gives your parent dependencies name here
            }
    }
};

In the above code snippet you see pathname is gives under the paths.

Your file called myslider.min.js is under folder js.

The path for folder given below.

app/code/VendorName/ModuleName/view/frontend/web/js/myslider.min.js

With help of shim attribute give dependencies.

As our slider depends on jQuery.

Magento 2 Call Helper Function in phtml

Conclusion:

I hope you like this article and if you have any query, please comment below.