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

[ktmn]

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

[ktmn]

I described a workaround in #1472

[derekdowling]

I'm seeing this same issue but with: $("select").material_select();

[tomicakorac]

@derekdowling same problem here, Materialize 0.97.1. Were you able to fix it?

@ktmn can you please explain your workaround? I don't think I understand it, sorry.

[ktmn]

@tomicakorac Install hammerjs and pickadate with npm, import with webpack or similar.

[derekdowling]

For now I reverted to using browser-default which seems to work fine but isn't quite as nice looking. Also on 0.97.1

[derekdowling]

Still not working as of 0.97.5 despite trying to do @ktmn's "fix". Perhaps it has to do with using the sass version?

[m-gv]

Still experiencing issues with this on v0.97.5 as well. Any options?

[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.

[Kail0]

Above solution from @m-gv works great..

[abdou-ghonim]

@m-gv works for me too 👍

[acwio]

@m-gv Great solution. Thanks!

[Romain-Luengo]

Hello guys,

I've the same issue but i don't have the easing plugin, do you know how to solve it ?

Thank you ;)

[kmmbvnr]

I've got the same error when upgrading to 0.99, b/c in my custom build of Materialize, I didn't update jquery.easing version

https://github.com/Dogfalo/materialize/blob/e6576cc6308efd301d2de57279173bb89332f5bb/Gruntfile.js#L132

-          "js/jquery.easing.1.3.js",
+          "js/jquery.easing.1.4.js",

[tomscholz]

@kmmbvnr I created a full changelog here

[angrykoala]

This is happening to me with [email protected] 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