Uncaught TypeError: $(...).dialog is not a function: How do I include dialog? I have added this code in my JavaScript file.

$( "#sponsor_dialog" ).dialog({
      autoOpen: false,
      height: 'auto',
      width:  520, resizable: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#sponsor_opener" ).click(function() {
      $( "#sponsor_dialog" ).dialog( "open" );
    });


I get the following error:


  Uncaught TypeError: $(...).dialog is not a function


In the module_name.libraries.yml I have added this.

sponsor_form:
  version: 1.x
  js:
    # For some reason, you need to put the js directly under 'js'.
    js/sponsor_form.js: {}
  dependencies:
   - core/jquery
   - core/drupal.ajax
   - core/drupal
   - core/drupalSettings
   - core/jquery.once


I am checking it when a user is logged out. Does this affect it in any way?
I have the same problem when I am logged in, though.
Drupal does not assign "$" to jQuery. That is because there may be libraries, which want to do something different with "$".

So you have to do this yourself:

(function ($) {
$( "#sponsor_dialog" ).dialog({
      autoOpen: false,
      height: 'auto',
      width:  520, resizable: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#sponsor_opener" ).click(function() {
      $( "#sponsor_dialog" ).dialog( "open" );
    });
})(jQuery);