-1

This question already has an answer here:

I'm trying to load a javascript function in my custom script with jquery and materialize. When the script load it says

 Uncaught TypeError: $ is not a function and sidenav() is not defined. 

My theme library is as follows

    global-styling:
  version: VERSION
  css:
    base:
      materialize/css/materialize.min.css: {}
      css/style.css: {}
  js:
    materialize/js/materialize.min.js: { minified:true}
    js/layout.js: {}
  dependencies:
    - core/jquery

My layout.js is simple

  $('.sidenav').sidenav();

If I look at dev tools it shows materialize and jquery loading before my script. I followed the answer to get jquery working but sidenav() comes back undefined. sidenav() is a materialize function and material.js is loading before this script.

How do I properly attach a 3rd party js framework and call a function from it?

marked as duplicate by Clive theming Jun 12 at 14:51

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1

$ is a shortcode for jQuery, does your layout.js contain just

 $('.sidenav').sidenav();

Maybe try

(function ($, Drupal) {
    $('.sidenav').sidenav();
 })(jQuery, Drupal);

You can read more here: https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview

  • That seemed to work to fix jquery. It won't, however, read .sidenav() which is a materialize function. I'm guessing I'm going need to somehow include materialize.js in the ($, Drupal) part? – Tyler Jun 12 at 14:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.