当使用Laravel Mix时，$(...).DataTable不是一个函数。

Question

我在使用Laravel Mix和DataTables时遇到了困难。 我遇到的问题是，当我编译我的.js文件等时，每次访问执行jQuery数据表的页面时，都会抛出以下错误：

错误是：

jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
Uncaught TypeError: $(...).DataTable is not a function

据我所知，$(...).DataTable不是全局变量，但是如何确保它可以在全局范围内（或在我的应用程序内）访问？

以下是我的设置：

app.js

import jquery from 'jquery/dist/jquery.slim'
import 'bootstrap-sass'
import 'datatables.net';
import dt from 'datatables.net-bs';

window.$ = window.jQuery = jquery;

webpack.mix.js

mix
    .js('resources/assets/admin/js/app.js', 'js/')
    .extract([
        'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
    ])
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
        DataTable : 'datatables.net-bs'
    })

非常感谢您的任何想法。

- Chris

---

请查看 datatables.net-bs npm 页面。var $ = require( 'jquery' ); require( 'datatables.net-bs' )( window, $ ) - ljubadr

同样适用于 datatables.net。从 npm 页面 var $ = require( 'jquery' ); require( 'datatables.net' )( window, $ ); - ljubadr

我之前尝试过这个，但是会导致这个问题：Uncaught ReferenceError: $未定义。难道没有导入它的方法吗？ - Chris

更新后的答案是：import $ from 'jquery'; - ljubadr

或者，在你的情况下，import $ from 'jquery-slim'。我错过了那个slim版本。 - ljubadr

Answer 1

编辑：虽然此答案在发布和接受时有效，但看起来现在不再适用。 对于任何寻找更新解决方案的人，其他答案已经更新

Yevgeniy Afanasyev

Alexander Gallego L.

Artistan

因为这是被接受的答案，我会添加新的解决方案，但应该将功劳归给提供更新答案的人

window.$ = window.jQuery = require( 'jquery' );

require( 'datatables.net' );
require( 'datatables.net-bs' );

---

原始答案

查看datatables.net和datatables.net-bs的npmjs页面

它们应该像这样初始化

var $ = require( 'jquery' );
require( 'datatables.net' )( window, $ );
require( 'datatables.net-bs' )( window, $ );

我们可以将它转换为这样

var $     = require( 'jquery' );
var dt    = require( 'datatables.net' )
var dt_bs = require( 'datatables.net-bs' )

// in this call we're attaching Datatables as a jQuery plugin
// without this step $().DataTable is undefined
dt( window, $ )
// we need to do the same step for the datatables bootstrap plugin
dt_bs( window, $ )

但是如果你真的想使用import .. from ..，请查看MDN import documentation。

import $ from 'jquery/dist/jquery.slim';
import * as dt from 'datatables.net';
import * as dt_bs from 'datatables.net-bs';

dt( window, $ )
dt_bs( window, $ )

- ljubadr

---

我在使用第一种方法时遇到了错误，错误信息为：“Uncaught TypeError: Cannot set property '$' of undefined”。 - Yevgeniy Afanasyev

这个不起作用。该模块包含一个自调用函数，它返回的只是数据表对象，该模块会自动解析并附加到$.fn上。因此，他们的文档与代码不匹配。这个自调用函数本身需要require jQuery，但是，如果我编辑datatables模块，并将require('jquery')分配给window对象，则DataTables加载的jquery模块不是由我的主app.js加载的模块实例。当使用===进行比较时，它们看起来不相等。 - thephpdev

@thephpdev，你说得对。在我发布这个答案的时候，我的代码示例是可以工作的，但我猜自那时以来可能有些变化。我已经更新了我的答案。我希望其他提供答案的人不介意我使用他们的解决方案，因为这是一个被接受的答案。我给了他们相应的信用。 - ljubadr

经过数小时的试错，以下代码“可行”。window.$ = window.jQuery = require("jquery"); require('datatables.net'); require('datatables.net-dt'); - Alex Barker

@AlexBarker 我已经更新了关于 window.$ = window.jQuery = ... 的答案。 - ljubadr

Answer 2

最新的Laravel Mix：

在webpack中不需要调用所需的datatable包，去掉(...)

这样将会加载bootstrap、jquery、datatables以及datatables的许多插件，而不会出现任何问题...

window._ = require( 'lodash' );;
window.$ = window.jQuery = require( 'jquery' );;
window.Popper = require('popper.js').default;

// bootstrap
require('bootstrap');

// bootstrap datatables...
require( 'jszip' );
require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.colVis.js' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-autofill-bs4' );
require( 'datatables.net-colreorder-bs4' );
require( 'datatables.net-fixedcolumns-bs4' );
require( 'datatables.net-fixedheader-bs4' );
require( 'datatables.net-responsive-bs4' );
require( 'datatables.net-rowreorder-bs4' );
require( 'datatables.net-scroller-bs4' );
require( 'datatables.net-select-bs4' );
// bs4 no js - require direct component
// styling only packages for bs4
require( 'datatables.net-keytable' );
require( 'datatables.net-rowgroup' );
// pdfMake
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

不需要在webpack.mix.js中添加其他代码。

.extract([
    'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
])
.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
    DataTable : 'datatables.net-bs'
})

- Artistan

---

兄弟，你救了我的一天。在 Laravel-Mix 4.0.7、Datatables 1.10.19 和 Datatables Buttons 1.5.6 中运行得非常好。 - Marcos Regis

你救了我的一天。谢谢。 - Ary Wibowo

Answer 3

解决方案（1） 以下是我的解决方法：

Step 1：

require('datatables.net');
require('datatables.net-bs4');

解决方法（2）

以下是之前的代码，会导致错误："$(...).DataTable 不是一个函数":

var a = require('../../../node_modules/datatables.net/js/jquery.dataTables.js');
var b = require('../../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js');

这是我修复它的方式，但显然推荐使用顶部解决方案。

window.$.fn.DataTable = a;
window.$.fn.DataTable = b;

请在您了解魔术的原因时进行评论。问题是“为什么与软件包链接相比，直接链接js文件的效果不同？”

- Yevgeniy Afanasyev

Answer 4

对于我在Bootstrap中加载的所有功能，我都会使用以下代码：

try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');

require('bootstrap');

window.JSZip = require("jszip");
//require( "pdfmake" );
require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.colVis.js' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-colreorder-bs4' );
require( 'datatables.net-fixedcolumns-bs4' );
require( 'datatables.net-responsive-bs4' );
require( 'datatables.net-rowreorder-bs4' );
require( 'datatables.net-scroller-bs4' );
require( 'datatables.net-keytable' );
require( 'datatables.net-rowgroup' );

} catch (e) {}

我使用Laravel 5.7和npm 6.4.1进行开发。

- Alexander Gallego L.

Answer 5

我想补充一下Artistan的答案（我无法评论）。使用他的代码，我能够让CSV、复制和PDF按钮出现，但是Excel按钮没有出现，直到我更改了这行代码。

require( 'jszip' );

到这个

window.JSZip = require('jszip');

之后，通用的“excel”和“excelHtml5”按钮都出现了。

- Garrett

---

谢谢您的回复。只是想补充一下，当使用import JSZip from "jszip"时，您可以在导入后添加window.JSZip = JSZip以达到相同的效果。 - fignet