[Drupal D9–D10 Upgrade] Resolve jquery.once error during D9-D10 upgrade- Note

[Original article: https://www.drupal.org/node/3158256]

Template

your-module-name.libraries.yml

drupal.form:
  js:
    js/your-library-file.js: {}
  dependencies:
    - some-origina/dependency
+   - core/drupal
+   - core/jquery
+   - core/once

your-library-file.js

- (function ($, window, Drupal, drupalSettings) {
+ (function ($, window, Drupal, drupalSettings, once) {

...

Drupal.behaviors.myfeature = {
    attach(context) {
-     const elements  =  once('myfeature', '[data-myfeature]', context);
+     const $elements =  $(once('myfeature', '[data-myfeature]', context));
      ....
-     elements.forEach(processingCallback);
+     $elements.each(processingCallback);
    }
  };
  function processingCallback(index, value) {}
...


- })(jQuery, this, Drupal, drupalSettings);
+ })(jQuery, this, Drupal, drupalSettings, once);

Example

bootstrap.libraries.ym|

drupal.form:
  js:
    js/misc/form.js: {}
  dependencies:
    - bootstrap/theme
+   - core/drupal
+   - core/jquery
+   - core/once

form.js

- (function ($, window, Drupal, drupalSettings) {
+ (function ($, window, Drupal, drupalSettings, once) {

  Drupal.behaviors.bootstrapForm = {
    attach: function (context) {
      if (drupalSettings.bootstrap && drupalSettings.bootstrap.forms_has_error_value_toggle) {

-       var $context = $(context);
-       $context.find('.form-item.has-error:not(.form-type-password.has-feedback)').once('error').each(function () {
-       const $elements =  $(once('myfeature', '[data-myfeature]', context));
-         var $formItem = $(this);
-         var $input = $formItem.find(':input');
-         $input.on('keyup focus blur', function () {
-           if (this.defaultValue !== void 0) {
-             $formItem[this.defaultValue !== this.value ? 'removeClass' : 'addClass']('has-error');
-             $input[this.defaultValue !== this.value ? 'removeClass' : 'addClass']('error');
-           }
-         });
-       });

+        const $elements =  $(once('.form-item.has-error:not(.form-type-password.has-feedback)', 'error', context));
+        $elements.each(function () {
+            const $elements =  $(once('myfeature', '[data-myfeature]', context));
+            var $formItem = $(this);
+            var $input = $formItem.find(':input');
+            $input.on('keyup focus blur', function () {
+                if (this.defaultValue !== void 0) {
+                    $formItem[this.defaultValue !== this.value ? 'removeClass' : 'addClass']('has-error');
+                    $input[this.defaultValue !== this.value ? 'removeClass' : 'addClass']('error');
+                  }
+            });
+        });

      }
    }
  };


- })(jQuery, this, Drupal, drupalSettings);
+ })(jQuery, this, Drupal, drupalSettings, once);