How to use Datatables with Symfony 4 and Webpack Encore?

I am trying to use Datatables in a Symfony 4 project, using Webpack Encore, I've read the datatables documentation about integration with yarn, 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:

Package versions (package.json):

{
    "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"
    }
}

webpack.config.js:

I disabled AMD loader (see the last lines):

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;

app.js

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();
});

Test template file:

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}

{% block body %}
  <table id="tabletest">
      {{ Here a whole html table ... }}
  </table>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

Having disabled the AMD loader in webpack, and added the line $.fn.dataTable = $.fn.DataTable = global.DataTable = require('datatables.net-bs4'); in app.js, I have no javascript errors, but datatables is not applied to the #tabletest table...

Can someone point me in the right direction? Thanks.