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!