title: How to use Datatables with Symfony 4 and Webpack Encore?
body: <p>I am trying to use Datatables in a Symfony 4 project, using Webpack Encore, I've read <a href="https://datatables.net/download/" rel="nofollow noreferrer">the datatables documentation about integration with yarn</a>, lots of tutorials and questions on SO, but I still can't figure how to make it work... I tried all possible configurations and I got errors, or just nothing happens. I ended with:</p>
  
  <p><strong>Package versions (package.json):</strong> </p>
  
  <pre class="lang-json prettyprint-override"><code>{
      "devDependencies": {
          "@fortawesome/fontawesome-free": "^5.6.3",
          "@symfony/webpack-encore": "^0.22.0",
          "bootstrap": "^4.2.1",
          "jquery": "^3.3.1",
          "node-sass": "^4.11.0",
          "popper.js": "^1.14.6",
          "sass-loader": "^7.0.1",
          "webpack-notifier": "^1.6.0"
      },
      "license": "UNLICENSED",
      "private": true,
      "scripts": {
          "dev-server": "encore dev-server",
          "dev": "encore dev",
          "watch": "encore dev --watch",
          "build": "encore production --progress"
      },
      "dependencies": {
          "datatables.net-bs4": "^1.10.20",
          "flag-icon-css": "^3.2.1"
      }
  }
  </code></pre>
  
  <p><strong>webpack.config.js:</strong></p>
  
  <p>I disabled AMD loader (see the last lines): </p>
  
  <pre class="lang-js prettyprint-override"><code>var Encore = require('@symfony/webpack-encore');
  
  Encore
      .setOutputPath('public/build/')
      .setPublicPath('/build')
  
      .addEntry('app', './assets/js/app.js')
  
      // will require an extra script tag for runtime.js
      // but, you probably want this, unless you're building a single-page app
      .enableSingleRuntimeChunk()
  
      // FEATURE CONFIG
      .cleanupOutputBeforeBuild()
      .enableBuildNotifications()
      .enableSourceMaps(!Encore.isProduction())
      // enables hashed filenames (e.g. app.abc123.css)
      .enableVersioning(Encore.isProduction())
      // enables Sass/SCSS support
      .enableSassLoader()
      // uncomment if you're having problems with a jQuery plugin
      .autoProvidejQuery()
  ;
  
  var config = Encore.getWebpackConfig();
  //disable amd loader
  config.module.rules.unshift({
      parser: {
          amd: false,
      }
  });
  module.exports = config;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>require('../css/app.scss');
  // JQuery and Bootstrap
  const $ = require('jquery');
  require('bootstrap');
  // Datatables and datatables-BS4
  require('datatables.net-bs4')();
  $.fn.dataTable = $.fn.DataTable = global.DataTable = require('datatables.net-bs4');
  
  // Should probably be in the template...
  $(document).ready(function() {
       console.log('Applying DT');
       $('#tabletest').DataTable();
  });
  
  </code></pre>
  
  <p><strong>Test template file:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>{% block stylesheets %}
      {{ encore_entry_link_tags('app') }}
  {% endblock %}
  
  {% block body %}
    &lt;table id="tabletest"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;A&lt;/td&gt;
              &lt;td&gt;B&lt;/td&gt;
              &lt;td&gt;C&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
          &lt;/tr&gt;
         &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
          &lt;/tr&gt; 
      &lt;/tbody&gt;
  &lt;/table&gt;
  {% endblock %}
  
  {% block javascripts %}
      {{ encore_entry_script_tags('app') }}
  {% endblock %}
  </code></pre>
  
  <p>Having disabled the AMD loader in webpack, and added the line <code>$.fn.dataTable = $.fn.DataTable = global.DataTable = require('datatables.net-bs4');</code> in app.js, I have no javascript errors, but datatables is not applied to the <code>#tabletest</code> table... </p>
  
  <p>Can someone point me in the right direction? Thanks. </p>