CODEWITHSUNDEEP
javascriptjquerywebpackdatatables
dcangulo
dcangulo

Reputation: 2107

Include jQuery datatables in webpack.ProvidePlugin on webpack

I am currently importing jQuery datatables on every javascript file I create.

import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-bs4/js/dataTables.bootstrap4';

$('#example').DataTable();

Is it possible to make it global that I'm not required to import it everytime? jQuery has this behavior and I'm able to access $ on every javascript without importing it.

In my environment.js, I currently have this:

const {environment} = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}));

module.exports = environment;

I believe that this is the file that loads packages globally. Is it possible to include datatables here?

So far I have tried this:

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default'],
  DataTable: 'datatables.net'
}));

And this:

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default'],
  DataTable: 'datatables.net/js/jquery.dataTables'
}));

But no luck. Do you know what the problem might be?

Upvotes: 2

Views: 1042

Answers (1)

Harut Galstian
Harut Galstian

Reputation: 26

I have the same issue, foud some helpfull things on this link https://datatables.net/forums/discussion/32542/datatables-and-webpack , maby you should use dt instead of DataTable

Upvotes: 1

Related Questions