Contrib.social

10.1.6:64 Uncaught TypeError: a(...).colorbox is not a function

Open on Drupal.org →
Created on 16 November 2023, over 1 year ago

Problem/Motivation

Receiving the following errors and am unable to determine why ...

drupal.js?v=10.1.6:64 Uncaught TypeError: a(...).colorbox is not a function
    at HTMLDivElement.<anonymous> (nacolorbox.js:19:11)
    at Function.each (jquery.js:383:1)
    at jQuery.fn.init.each (jquery.js:205:1)
    at Object.attach (nacolorbox.js:6:41)
    at drupal.js?v=10.1.6:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.1.6:162:34)
    at big_pipe.js?v=10.1.6:138:10
    at big_pipe.js?v=10.1.6:169:3
drupal.js?v=10.1.6:64 Uncaught TypeError: a(...).colorbox is not a function
    at HTMLDivElement.<anonymous> (nacolorbox.js:19:11)
    at Function.each (jquery.js:383:1)
    at jQuery.fn.init.each (jquery.js:205:1)
    at Object.attach (nacolorbox.js:6:41)
    at drupal.js?v=10.1.6:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.1.6:162:34)
    at drupal.init.js?v=10.1.6:32:12
    at HTMLDocument.listener (drupal.init.js?v=10.1.6:20:7)
drupal.js?v=10.1.6:64 Uncaught TypeError: a(...).colorbox is not a function
    at HTMLDivElement.<anonymous> (nacolorbox.js:19:11)
    at Function.each (jquery.js:383:1)
    at jQuery.fn.init.each (jquery.js:205:1)
    at Object.attach (nacolorbox.js:6:41)
    at drupal.js?v=10.1.6:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.1.6:162:34)
    at success (ajax.js?v=10.1.6:1800:20)
    at l (loadjs.min.js?v=4.2.0:1:217)
    at loadjs.min.js?v=4.2.0:1:1556

There are 3 calls to the colorbox function on the page, but each error looks slightly different ... not sure if that's relevant.

My code calling it looks like ...

import jQuery from 'jquery';

(($) => {
  Drupal.behaviors.naColorbox = {
    attach(context) {
      $('.block--collapsible', context).each((index, element) => {
        const content = $(element).find('.block--collapsible__content');
        let height = '92%';
        try {
          height = `${parseInt($(window).height() * 0.92, 10)}px`;
        } catch (ex) {
          // do nothing
        }
        $(element).colorbox({
          inline: true,
          href: content,
          width: '92%',
          height,
          maxWidth: '960px',
          maxHeight: '720px',
          scrolling: true,
        });
      });
    },
  };
})(jQuery);

Viewing the page's source (with JS not aggregated, I see ...

<script src="/modules/contrib/colorbox/js/colorbox.js?v=10.1.6"></script>
<script src="/libraries/colorbox/jquery.colorbox-min.js?v=10.1.6"></script>
<script src="/modules/contrib/colorbox_inline/js/colorbox_inline.js?s46bqs"></script>
...
<script src="/modules/contrib/colorbox_load/js/colorbox_load.js?s46bqs"></script>
...
<script src="/themes/custom/my_theme/dist/js/00-base/06-colorbox/nacolorbox.js?s46bqs"></script>

Steps to reproduce

I just upgraded to Drupal 10.1.6 and am running Colorbox v 2.0.1

Proposed resolution

What am I missing? It seems everything is installed, but I can't make this work.

Thanks!

💬 Support request
Status

Active

Version

2.0

Component

Code

Created by

🇺🇸United States dchaffin

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024