Installation Issues - Rails / Yarn / Webpacker

Installation Issues - Rails / Yarn / Webpacker

jasper502jasper502 Posts: 25Questions: 9Answers: 0

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.

Replies

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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

  • haroldusharoldus Posts: 1Questions: 0Answers: 0

    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
        })
      }
    }
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Excellent, thanks for posting.

This discussion has been closed.