Почему `import dataTables из 'datatables.net'` работает на некоторых машинах, но не на других?

Question

У нас есть однофайловый компонент Vue 1.x, который является оберткой для dataTables. Основы этого выглядят так:

<template>
...
</template>

<script>
import Vue from 'vue';
import $ from 'jquery';
import dataTables from 'datatables.net';
import dataTablesSelect from 'datatables.net-select';
import dataTablesColReorder from 'datatables.net-colreorder';
import dataTablesScroller from 'datatables.net-scroller';

const Table = Vue.extend({
    ...
    created() {
        $.fn.dataTable.ext.errMode = 'throw';
        ...
        this.dataTable = this.$table.DataTable(this.options);
    },
});
</script>

Компонент скомпилирован через нашу конфигурацию Webpack.

Это сработало просто отлично. Недавно мы портировали кодовую базу на Vue 2.x. На моем, а также на машинах моего коллеги портированный компонент прекрасно работает. Однако после того, как он был собран на нашем сервере сборки с использованием той же команды, он вместо этого выдает эту ошибку при загрузке страницы:
TypeError: Cannot read property 'ext' of undefined
, ссылаясь на строку выше:
$.fn.dataTable.ext.errMode = 'throw';

Похоже, что при построении на нашем сервере сборки dataTables фактически не импортируется должным образом. Я могу подтвердить, что это фактический сгенерированный файл app.js, вызывающий проблему, поскольку при его загрузке и локальном запуске генерируется та же ошибка. Я перепробовал все, что мог придумать, чтобы соответствовать средам, включая проверку того, что версии node / npm одинаковы и rm -rf ing node_modules. Тем не менее, мы все еще неоднократно получаем одни и те же результаты.

У меня нет идей о том, где еще отлаживать, поскольку, по общему признанию, я не очень разбираюсь в механике сборки веб-пакета. Что может быть причиной того, что это может работать только на определенных машинах?

Answer 1

Эта ошибка означает, что нет объекта $ .fn.dataTable.

Опубликуйте файл микса веб-пакета и узнайте, как вы используете jQuery. Я подозреваю, что здесь конфликтуют внешние / множественные jQuery, когда вы импортируете один jQuery, а DataTable инициализируется в другом jQuery. Посмотрите, работает ли эта работа.

// Right below your imports, initialize everything you imported
// this make sure fn.dataTable get initialized on the imported jQuery
// which is reference as $ in this case
dataTables(window, $);
dataTablesSelect(window, $);
dataTablesColReorder(window, $);
dataTablesScroller(window, $);

Бесстыдная вилка, посмотрите мою упаковку здесь - https://github.com/niiknow/vue-datatables-net - она ​​может помочь вам упростить ситуацию. Даже с моей оболочкой вы все равно должны знать, на каком jQuery вы его инициализируете.