Javascript "once is not a function" errors after library include

Question

I have a small module which contains the javascript library JSmol. This library renders molecular structures onscreen. The main module is called jmol. It contains an element, a twig template, a small javascript file, and the official JSmol library.

When I create an element on the page the element renders correctly, but the admin toolbar does not. Javascript console highlights 4 places that the "once" function is used, all in the code after the vendor library was included. One example is this:

TypeError: $(...).once is not a function

  Drupal.behaviors.escapeAdmin = {
    attach: function () {
      var $toolbarEscape = $('[data-toolbar-escape-admin]').once('escapeAdmin');

my javascript file is quite simple:

(function ($, Drupal, drupalSettings, Jmol) {
  'use strict';
  Drupal.behaviors.jmol = {
    attach: function () {
      var Info = drupalSettings.jmol.mydiv.info;
      $('#mydiv').html(Jmol.getAppletHtml("jmolApplet0", Info))
    }
  };
}(jQuery, Drupal, drupalSettings, Jmol));

Is it possible that the vendor code breaks this, or is it something that I have done?

Edit: here's my jmol.libraries.yml file:

jmol:
  version: 1.x
  js:
    lib/JSmol.min.js: {}
    js/jmol.js: {}
  dependencies:
    - core/drupalSettings
    - core/jquery
    - [I've tried adding core/jquery.once here to no avail]

Answer 1

I had this happen in my custom module as well. I then noticed it worked when logged in but once I was unauthenticated my code would throw this JS error. In the end it was simply an issue where I needed the dependency you listed already in my custom module library file dependencies:

dependencies:
- core/drupalSettings
- core/jquery
- core/jquery.once

Once I added this the required JS file was included when unauthenticated as well.

For a little extra information that forced the following JS file to be included as well:

It looks like you solved your specific instance which ended up being multiple versions of jQuery being installed. I would avoid that if possible as it complicates things a bit.

Answer 2

I'm not a Drupal 8 guy just yet. Still very much using 7 However I did find some items that may be helpful.

once() is not a core jquery method. I think it's a jquery plugin made for drupal 7 (Source). I don't know if this plugin is included in Drupal 8.

Is this library meant to work on drupal 7 and not fully ported to drupal 8?

A simple version of once() I built for my own (non drupal) site looks like:

$.fn.once = function(processed_class)
{
  if (typeof processed_class == 'undefined')
  {
    processed_class = 'processed';
  }
  return this.not('.' + processed_class).addClass(processed_class);
};

You could add this to your code outside of any document.ready or drupal.behaviors stuff (global scope) and it may work. You may also need to include your js file before your plugin.

As for your errors and missing menu a single javascript error can block the remaining javascript form loading on the page. As admin toolbar is js it's probably never getting called.