ekko-lightbox with webpack-encore: Cannot read property 'Constructor' of undefined

I solved it after lots of debugging. The problem was how I included jQuery and bootstrap. In my global.js I explicitly required jQuery with a require() call. However, this is automatically performed by webpack-encore via the line .autoProvidejQuery() in my webpack.config.js. Also, this auto provision of jQuery seems to occur for each javascript file referenced by webpack.config.js. That is: My global.js, public.js and members.js got each a separate instance of jQuery (by the way: this also slows down page load times!).

Obviously, these separate jQuery instances messed up the bootstrap module registration (they register under jQuery.fn[MODULE_NAME] or $.fn[MODULE_NAME]).

The solution is to create a so called shared entry to your webpack.config.js.

My webpack.config.js now looks like this:

// ....addEntry('global', './assets/js/global.js').addEntry('public', './assets/js/public.js').addEntry('members', './assets/js/members.js').createSharedEntry('vendor', [    'jquery',    'popper.js',    'bootstrap'])// allow sass/scss files to be processed.enableSassLoader()// allow legacy applications to use $/jQuery as a global variable.autoProvidejQuery()// ...

My global.js doesn't require jQuery or bootstrap anymore, because they're already included in the shared module. There's only a single require() left for global CSS definitions.

// global.jsrequire('../css/global.scss');

My members.js did not change, except that I added the line require('ekko-lightbox/dist/ekko-lightbox.css'); for including ekko-lightbox own CSS definitions.

Finally, I just had to extend my base HTML template to include the new vendor.js and the manifest.js before any other javascript files:

{% block javascripts %}<script src="{{ asset('build/manifest.js') }}"></script><script src="{{ asset('build/vendor.js') }}"></script><script src="{{ asset('build/global.js') }}"></script>{% endblock %}