CODEWITHSUNDEEP
webpackdatatablesimports-loader
Ron
Ron

Reputation: 23516

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

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?

Upvotes: 1

Views: 977

Answers (1)

gblock
gblock

Reputation: 604

I also struggle with DataTables and Webpack a lot.

Regarding your error: the configuration syntax for the loaders changed.

Here's what works for me:

webpack.config.js

{
    module: {
        rules: [
            {
                test: /datatables\.net.*.js$/,
                use: [{
                    loader: 'imports-loader',
                    options: {
                        additionalCode: 'var define = false; /* Disable AMD for misbehaving libraries */'
                    }
                }]
            }
        ],
    },
}

In your JS file:

require('datatables.net')(window, $);
require('datatables.net-responsive')(window, $);  // if you added this plugin

What it does is writing var define = false; on top of all datatable JS files, that effectively disables the AMD mode of datatables (which breaks webpack). It's important to limit this loader to JS files only, otherwise it will also put this in the datatable CSS files, which will result in a syntax error.

If you're using symfony + webpack encore you can add it like this:

Encore
    .addLoader({
        test: /datatables\.net.*.js$/,
        use: [{
            loader: 'imports-loader',
            options: {
                additionalCode: 'var define = false; /* Disable AMD for misbehaving libraries */'
            }
        }]
    })
;

Upvotes: 4

Related Questions