Using jQuery datatables with webpack - Error on new imports-loader version

SirRichard

I am using the latest datatables.net-bs version in a webpack setup (v1.11.5).

To make it work, I had to set the following configuration in my webpack.config.js:

{
    test: /datatables\.net.*/,
    use: 'imports-loader?define=>false'
}

I am using imports-loader==0.8.0. Unfortunately, this version is about 4 years old and I want to upgrade to the latest one (v3.1.1).

When I do this, I get an error about the changed API:

ValidationError: Invalid options object. Imports Loader has been initialized using an options object that does not match the API schema.

When I remove the configuration part from my webpack-config, I get this error:

Uncaught TypeError: can't access property "$", this is undefined

I tried to use the new imports-loader setup like this:

use: [
      {
       loader: "imports-loader",
       options: {
           imports: ["default jquery $"]
       }
  }
]

Unfortunately, this does not solve my problem.
**
My question: Does anybody know how to configure imports-loader so I can use the latest version without breaking my datatables?**

Thx!

allan

Are you able to put together a little demo repo which demonstrates the issue please? I can try to resolve it with that.

Allan

SirRichard

Hi Allan, thx a lot! I'll see to it that I create a demo repo!

SirRichard

@allen I manged to put together a small demo project. Hope this is what you asked for. Thx a lot!

https://github.com/GitRon/jquery_datatable_example

allan

Awesome - many thanks for the repo.

I've just been experimenting a bit and I don't think you need to use imports-loader at all for DataTables.

In index.js if I use:

import $ from 'jquery';
import dt from 'datatables.net-bs';

and in base.js comment out the require line. Also remove the datatables.net test from webpack.config.js and run the server it will load the DataTable successfully.

Allan

SirRichard

Awesome! Thx so much for your help! Works like a charm!