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

added the require:


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')
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
    DataTable: ''

I can get it to work via the CDN:

<script src=""></script>
<link rel="stylesheet" href="">

<script type='text/javascript'>

  $(document).ready(function() {
  } );


I have found this:

At a loss right now.

One clue - if I have the require('')(); 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.


  • allanallan Posts: 62,235Questions: 1Answers: 10,209 Site admin

    Two possibilities to try:

    require('')( 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?


  • haroldusharoldus Posts: 1Questions: 0Answers: 0

    Here is what is working for me with Rails 6:
    yarn add expose-loader import-loader[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 ''
    import ''
    export function dataTableGenericInit (tableList) {
      if (tableList.length === 0) return;
      tableList.forEach( (table) => {
      function uninstall(table) {
        document.addEventListener('turbolinks:before-cache', () => {
          if ($.fn.dataTable.isDataTable(table)) {
      function install(table) {
          destroy: true, // Stop turbolinks errors
          // your other options
  • colincolin Posts: 15,205Questions: 1Answers: 2,592

    Excellent, thanks for posting.

This discussion has been closed.