$.fn.dataTable is undefined

rycwilson

I am using datatables.net-bs and datatables.net-rowgroup-bs with an existing jQuery and Bootstrap 3 setup.

Also using typescript and esbuild. No issues at compile and build steps, but I get this in the browser:

Uncaught TypeError: Cannot set properties of undefined (setting 'RowGroup')

It points to this line in dataTables.rowGroup.mjs: $.fn.dataTable.RowGroup = RowGroup

... which seems to indicate something very basic like the DataTables extension not being defined on jQuery

In the top-level script, the file ./jquery.js is imported. It looks like so:

import jquery from 'jquery';
window.$ = jquery;
window.jQuery = jquery;

In the browser console I confirm that $ and jQuery are defined.

Also in the top-level script and immediately following the ./jquery import is a ./bootstrap import that itself imports the necessary bootstrap components.

Subsequent to those imports, and In several separate modules, I have the datatables imports. Per the download builder, they look like:

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

Any ideas what I'm doing wrong?

allan

Hi,

What versions of DataTables and RowGroup are you using?

I've just tried to reproduce the issue, but was unable to do so. Here is the test case I put together.

If you could modify it or give me a minimal repo that reproduces the issue I can look into it.

Thanks,
Allan

rycwilson

Hi Allan. One thing I noticed is that all the datatables packages come with their own installation of jquery. Why is that?

This is just my amateur interpretation of the problem, but it sure looks like the RowGroup extension is trying to add itself to a $.fn.dataTable (or $.fn.DataTable, or both) extension that does not exist.

Are the datatables packages extending their own copies of jquery instead of the one I've actually imported into my bundle?

To answer your question, I'm using:
datatables.net-bs@1.13.6
datatables.net-rowgroup-bs@1.4.1

Not sure if it's relevant, but I'm using yarn to manage dependencies for a rails project.

allan

One thing I noticed is that all the datatables packages come with their own installation of jquery. Why is that?

They shouldn't. They each have a dependency on jQuery, but they should just use the top level jQuery if you have one, rather than each having their own copy. For example this is the main datatables.net package repo and this for Buttons, neither have jQuery in there.

Perhaps that is a configuration property of the bundler - npm used to install dependencies nested, but has long since done it flat for example.

Allan

rycwilson

Ok, great, positive sanity check!

I tried blasting my node_modules/ and doing another yarn install, but again all the packages have their own node_modules/ directory with a jquery installation and nothing else.

Blasted again and this time did an npm install => no more jquery installations. And I'm getting a different error, so I guess that's progress.

allan

yarn has a flat install option: https://classic.yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-flat

Allan

rycwilson

Just to simplify the environment, I removed datatables-helper and datatables.net-plugins packages. With that, a regular yarn installation did not result in the nested jquery installations.

Re-added datatables.net-plugins and still ok. I don't remember what datatables-helper is or why I needed it, but I'll just leave it out for now.

Tables are running and I'm back in business. Thanks!