Trouble loading DataTable vanilla with Vite

argonzalez2017

Code:
import * as DataTable from 'datatables.net';

    console.log($);

    new DataTable($element, {});

Error messages shown:
ƒ (selector, context) {
return new jQuery.fn.init(selector, context);
}
jquery.dataTables.js:4559 Uncaught TypeError: $ is not a function
at jquery.dataTables.js:4559:21
at new module.exports (jquery.dataTables.js:50:11)
at of-datatable.js?t=1658675799322:10:1
(anonymous) @ jquery.dataTables.js:4559
module.exports @ jquery.dataTables.js:50
(anonymous) @ of-datatable.js?t=1658675799322:10
module.esm.js:416

Description of problem:
I can't get datatables vanilla to work at all with Vite. jQuery works with every other module on my site.

kthorngren

I can't get datatables vanilla to work

When you say Datatables Vanilla are you referring to this library?
https://github.com/Mobius1/Vanilla-DataTables

It states in the readme that it is no longer maintained and to use this library:
https://github.com/fiduswriter/Simple-DataTables

In either case these are maintained by third party developers. You need to contact the library developer for help. If you are using standard Datatables provided by this site then please post a link to your page or a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/#Technical-notes

Kevin

argonzalez2017

I am referring to this library. According to the documents, the vanilla way to load DataTable is via "new DataTable(element, options)". When I do this with Vite, i am recieving this error.

tangerine

I am referring to this library.

What library?

According to the documents,

What documents?

Please be more precise.

As Kevin already told you, the libraries you linked to are not jQuery DataTables.

argonzalez2017

THIS library.

Non-jQuery initialisation
If you prefer writing Javascript without using the abstractions jQuery provides, you can initialise DataTables (as of v1.11) using:

let table = new DataTable('#example', {
    // options
});

This is directly from the DataTables documentation.

kthorngren

Uncaught TypeError: $ is not a function

Are you loading jquery.js? Datatables still requires jqeury.js, see the dependencies docs, event if you want to initialize without using jquery methods.

Kevin

allan

I'll try it on Tuesday. I've been doing some work for ES modules support recently which might come into play here.

Allan

argonzalez2017

Yes i am.

import jQuery from 'jquery';
Object.assign(window, {
    $: jQuery,
    jQuery
})

import DataTable from 'datatables.net';
let test = new DataTable("table", {
    search: false
});

Every other module that requires jQuery works. Only DataTables is having the issue.

Uncaught TypeError: $ is not a function

Should note. If I load it the jquery way, the table will load but will not load the necessary rowGroup plugin.

import DataTable from 'datatables.net';
import 'datatables.net-rowgroup';

DataTable($)
let table = $("table").DataTable(options);

The error i receive

table.rowGroup is not a function