Uncaught TypeError: Cannot read properties of undefined (reading 'css') + Cannot read properties of undefined (reading 'width')

[r-interactive]

Lightbox v2.11.4

When I click on any images to open the lightbox, it has these following errors:

#1) Cannot read properties of undefined (reading 'css')
#2) Cannot read properties of undefined (reading 'width')

looking where the error originated:

Cannot read properties of undefined (reading 'css'):
// Position Lightbox
var top = $window.scrollTop() + this.options.positionFromTop;
var left = $window.scrollLeft();
this.$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);

Cannot read properties of undefined (reading 'width'):
// Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function() {
var self = this;
/*
We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
Why do this? If the disableScrolling option is set to true, a class is added to the body
tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
hidden before we measure the document width, as the presence of the scrollbar will affect the
number.
*/
setTimeout(function() {
self.$overlay
.width($(document).width())
.height($(document).height());

}, 0);

};

What can I do to fix this?

[r-interactive]

Fixed! Actually there was another lightbox js file loaded from another plugin, so I had to dequeue that lightbox js file, only using the one from lightbox2