Works fine locally (NPM/Webpack) but breaks when in production

[xdcha]

Firstly, thanks for creating such a great plugin. Seems to work brilliantly when I run it locally. In production, however, it breaks. No console errors and when you click an image you are just taken to the source in a new window. I am using Bootstrap 5.

Am I doing something wrong?

App.js (entry file)

import 'bootstrap';
import 'bs5-lightbox';

File.html

<a href="../img/inv-item.jpeg" data-toggle="lightbox" data-gallery="hero-inv-gallery" class="ratio ratio-1x1  col-6">
    <img class="c-ofc" src="../img/inv-item.jpeg" class="img-fluid">
</a>
<a href="../img/inv-item2.jpg" data-toggle="lightbox" data-gallery="hero-inv-gallery" class="ratio ratio-1x1 col-6">
    <img class="c-ofc" src="../img/inv-item2.jpg" class="img-fluid">
</a>
<div data-src="../img/inv-item2.jpg" data-toggle="lightbox" data-gallery="hero-inv-gallery"></div>
<div data-src="../img/inv-item2.jpg" data-toggle="lightbox" data-gallery="hero-inv-gallery"></div>
<div data-src="../img/inv-item3.jpg" data-toggle="lightbox" data-gallery="hero-inv-gallery"></div>

When I view the source js file in production there is no reference to data-toggle but there is in development mode.

Appreciate any advice/guidance.

[xdcha]

Would appear it does not automatically initialise for me.

import Lightbox from 'bs5-lightbox';
document.querySelectorAll('[data-lightbox]').forEach(el => el.addEventListener('click', Lightbox.initialize));

This indeed solves it.