title: ekko-lightbox with webpack-encore: Cannot read property 'Constructor' of undefined
body: <p>I would like to use Symfony's webpack-encore to include <a href="https://github.com/ashleydw/lightbox" rel="nofollow noreferrer">ekko-lightbox</a>.</p>
  
  <p>I've created a working jsFiddle demo here: <a href="https://jsfiddle.net/92vq1z2b/" rel="nofollow noreferrer">https://jsfiddle.net/92vq1z2b/</a>. It uses the same versions of bootstrap, jQuery and ekko-lightbox as I do.</p>
  
  <p>In my local Symfony project it doesn't work however. When I click on a "lightboxed" image, I get the following error in the browser console:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'Constructor' of undefined
  at new Lightbox (ekko-lightbox.js:97)
  at HTMLAnchorElement.&lt;anonymous&gt; (ekko-lightbox.js:649)
  at Function.each (jquery.js:362)
  at jQuery.fn.init.each (jquery.js:157)
  at jQuery.fn.init._jQueryInterface [as ekkoLightbox] (ekko-lightbox.js:645)
  at HTMLAnchorElement.&lt;anonymous&gt; (members.js:8)
  at HTMLDocument.dispatch (jquery.js:5206)
  at HTMLDocument.elemData.handle (jquery.js:5014)
  </code></pre>
  
  <p>Line 97 of ekko-lightbox.js reads as follows:</p>
  
  <pre><code>this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3;
  </code></pre>
  
  <p>Somehow, webpack-encore seems to mess up the javascript files. But I can't find the problem.</p>
  
  <p>My webpack.config.js looks like this:</p>
  
  <pre><code>// webpack.config.js
  // ...
  .addEntry('global', './assets/js/global.js')
  .addEntry('public', './assets/js/public.js')
  .addEntry('members', './assets/js/members.js')
  // ...
  </code></pre>
  
  <p>The global.js file includes bootstrap, jQuery and the like:</p>
  
  <pre><code>// global.js
  require('../css/global.scss');
  
  var $ = require('jquery');
  require('popper.js');
  require('bootstrap');
  </code></pre>
  
  <p>The members.js file includes ekko-lightbox:</p>
  
  <pre><code>// members.js
  require('../css/members.scss');
  
  require('ekko-lightbox');
  
  $(document).ready(function () {
      $(document).on('click', '[data-toggle="lightbox"]', function (event) {
          event.preventDefault();
          $(this).ekkoLightbox();
      });
  });
  </code></pre>
  
  <p>In my HTML code the global.js is loaded before the members.js:</p>
  
  <pre><code>// HTML code that loads the javascript files
  &lt;script src="/build/global.js"&gt;&lt;/script&gt;    
  &lt;script src="/build/members.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>By the way: For some reason, webpack-encore uses the minified version of ekko-lightbox, i.e. ekko-lightbox.min.js. Even in dev mode. My expectation was that webpack-encore would always use the non-minified version in dev mode. I had to change the ekko-lightbox package.json file to change this behavior (the 'main' entry in the package.json previously pointed to the .min.js file, now it points to the non-minified version). I think that the 'main' entry should always point to the target file without any file extension (that's how it's defined in the package.json of bootstrap). That is, it should look like <code>"main": "dist/ekko-lightbox"</code> instead of <code>"main": "dist/ekko-lightbox.js"</code> or <code>"main": "dist/ekko-lightbox.min.js"</code>.</p>
  
  <p><strong>Version information:</strong></p>
  
  <pre><code>Google Chrome 63
  "@symfony/webpack-encore": "^0.17.1",
  "bootstrap": "^4.0.0-beta.3",
  "jquery": "^3.2.1",
  "ekko-lightbox": "^5.3.0"
  </code></pre>
  
  <p>Update: I have noticed that bootstrap v4 is no more in beta. But the problem persists after running <code>npm update</code>. My new npm package versions read as follows (only top-level):</p>
  
  <pre><code>+-- @symfony/webpack-encore@0.17.1
  +-- bootstrap@4.0.0
  +-- ekko-lightbox@5.3.0
  +-- jquery@3.3.1
  +-- node-sass@4.7.2
  +-- popper.js@1.13.0
  +-- sass-loader@6.0.6
  `-- webpack-notifier@1.5.1
  </code></pre>