Symfony 带有网页包encore的ekko lightbox:无法读取属性'；建造商'；未定义的

我想使用Symfony的网页包encore包括

我已经在这里创建了一个工作的JSFIDLE演示：。它使用与我相同的bootstrap、jQuery和ekko lightbox版本

然而，在我当地的Symfony项目中，它不起作用。单击“lightboxed”图像时，浏览器控制台中出现以下错误：

Uncaught TypeError: Cannot read property 'Constructor' of undefined
at new Lightbox (ekko-lightbox.js:97)
at HTMLAnchorElement.<anonymous> (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.<anonymous> (members.js:8)
at HTMLDocument.dispatch (jquery.js:5206)
at HTMLDocument.elemData.handle (jquery.js:5014)

不知何故，网页包encore似乎弄乱了javascript文件。但我找不到问题所在

我的webpack.config.js如下所示：

// webpack.config.js
// ...
.addEntry('global', './assets/js/global.js')
.addEntry('public', './assets/js/public.js')
.addEntry('members', './assets/js/members.js')
// ...

// ...
.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()
// ...

global.js文件包括bootstrap、jQuery等：

// global.js
require('../css/global.scss');

var $ = require('jquery');
require('popper.js');
require('bootstrap');

members.js文件包括ekko lightbox：

// members.js
require('../css/members.scss');

require('ekko-lightbox');

$(document).ready(function () {
    $(document).on('click', '[data-toggle="lightbox"]', function (event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
});

在我的HTML代码中，global.js在members.js之前加载：

// HTML code that loads the javascript files
<script src="/build/global.js"></script>    
<script src="/build/members.js"></script>

更新：我注意到BootstrapV4已经不再是beta版了。但运行

npm update

后，问题仍然存在。我的新npm包版本如下（仅限顶级版本）：

---

经过多次调试，我解决了这个问题。问题是我如何包含jQuery和引导。在我的global.js中，我使用

require（）

调用显式地要求jQuery。但是，这是由webpack encore通过my

webpack.config.js

中的行

.autoProvidejQuery（）

自动执行的。此外，jQuery的这种自动提供似乎适用于

webpack.config.js

引用的每个javascript文件。也就是说：My global.js、public.js和members.js都有一个单独的jQuery实例（顺便说一句：这也会降低页面加载速度！）

显然，这些单独的jQuery实例弄乱了引导模块注册（它们在

jQuery.fn[module\u NAME]

或

$.fn[module\u NAME]

下注册）

解决方案是创建一个所谓的

我的webpack.config.js现在如下所示：

// webpack.config.js
// ...
.addEntry('global', './assets/js/global.js')
.addEntry('public', './assets/js/public.js')
.addEntry('members', './assets/js/members.js')
// ...

// ...
.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()
// ...

myglobal.js不再需要jQuery或bootstrap，因为它们已经包含在共享模块中。全局CSS定义只剩下一个require（）

// global.js
require('../css/global.scss');

mymembers.js没有改变，只是我添加了行

require（'ekko-lightbox/dist/ekko-lightbox.css'）用于包含ekko lightbox自己的CSS定义

// global.js
require('../css/global.scss');

最后，我只需扩展我的基本HTML模板，将新的vendor.js和manifest.js包含在任何其他javascript文件之前：

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

{%block javascripts%}
{%endblock%}