Installation Issues - Rails / Yarn / Webpacker

jasper502

Rails 5.x app. Installed jQuery and confirmed that jQuery works.

Installed DT via yarn:

yarn add datatables.net-dt

added the require:

require('datatables.net-dt')();

I added the basic demo and all I get is:

jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
    at HTMLDocument.

Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (application.js:19)
    at mightThrow (deferred.js:97)
    at process (deferred.js:139)

I added DT to my plugins:

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
    DataTable: 'datatables.net-dt/js/dataTables.dataTables'
  })
)

I can get it to work via the CDN:

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<script type='text/javascript'>

  $(document).ready(function() {
      $('#example').DataTable();
  } );

</script>

I have found this: https://datatables.net/forums/discussion/comment/146572/#Comment_146572

At a loss right now.

One clue - if I have the require('datatables.net-dt')(); AND the CDN at the same time I get these errors:

Uncaught TypeError: Cannot set property '$' of undefined
    at DataTable (jquery.dataTables.js:129)

It makes me think that the require does load DT but it's not registering somewhere.

allan

Two possibilities to try:

require('datatables.net-dt');

require('datatables.net-dt')( window, jQuery );

The former is suitable for AMD loading, while the latter is the CommonJS loader.

If they don't work, can you give me a link to your bundled package?

Allan

haroldus

Here is what is working for me with Rails 6:
yarn add expose-loader import-loader datatables.net datatables.net-[framework]

// config/webpack/environment.js

...

environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [
    { loader: 'expose-loader', options: {exposes: ['$', 'jQuery']}}
  ]
})

environment.loaders.append('imports', {
  test: /datatables\.net.*/,
  use: [
    {
      loader: 'imports-loader',
      options: {
        imports: {
          moduleName: 'jquery',
          name: '$',
        },
        additionalCode: 'var define = false;',
      },
    }
  ]
})
...

then in your js file where you initialise datatables:

import 'jquery'
import 'datatables.net'
import 'datatables.net-zf'

export function dataTableGenericInit (tableList) {
  if (tableList.length === 0) return;
  tableList.forEach( (table) => {
    uninstall(table)
    install(table)
  })
  function uninstall(table) {
    document.addEventListener('turbolinks:before-cache', () => {
      if ($.fn.dataTable.isDataTable(table)) {
        jQuery(table).DataTable().destroy()
      }
    })
  }
  function install(table) {
    jQuery(table).DataTable({
      destroy: true, // Stop turbolinks errors
      // your other options
    })
  }
}

colin

Excellent, thanks for posting.