jQuery.easing[jQuery.easing.def] is not a function

When I do

$(".dropdown-button").dropdown();

the dropdown opens fine, but when I click somewhere else and it’s time for the dropdown to close it says

jQuery.easing[jQuery.easing.def] is not a function

I’m using these versions:

https://code.jquery.com/jquery-2.1.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js

[m-gv]

It turned out one of the dependencies in my project was using 2.1.3. This version of JQuery no longer seems to set JQuery.easing.def to easeOutQuad by default, thus there will be an undefined error.

I solved this by forcing materialize to use JQuery 2.1.1 in the following way:

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript"> 
     $materialize = jQuery.noConflict(true); 
</script> 

Inside materialize.js:

if (typeof(jQuery) === 'undefined') {
  var jQuery;
  // Check if require is a defined function.
  if (typeof(require) === 'function') {
    jQuery = $materialize = require('jQuery');
  // Else use the dollar sign alias.
  } else {
    jQuery = $materialize;
  }
};

However now it is no longer possible to use the CDN version and to update without making changes to the materialize file. People working on the project after me will likely run into issues with the way I am currently solving it.

It would be great to get an official statement from @Dogfalo on how you should use materialize while you you have external modules which are using other versions of JQuery. (I don’t have access to those extrernal modules)

EDIT: This did not actually end up solving the issue for me, since the external dependency also loads JQuery using Java. When this happened, JQuery was again being replaced with the newer version 2.1.3: thus also the word JQuery inside Materialize gets replaced by version 2.1.3, instead of staying 2.1.1.

The context gets lost and JQuery.easing.def becomes undefined. I was able to solve this by putting the whole easing plugin inside of the following tags:

(function($, undefined) {
<easing plugin here>
}) (jQuery);

and replacing the word JQuery with $ in the easing plugin code.

(as suggested here: https://stackoverflow.com/questions/11533168/jquery-easingjquery-easing-def-is-not-a-function)

Would be great to see how this could be standardized though, so that me and others can keep using the standard version of materialize.

[angrykoala]

This is happening to me with materialize-css@0.100.0 and 0.99.0 (it wasn’t happening before)

Adding jqueryUI <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> seems to fix the problem, however I don’t understand why or if there is a better fix.

I’m using materialize as part of an electron app, and I prefer to use only npm based packages