import datatable in parceljs

Question

I'm trying to import the datatables (along with jquery and moment) with parceljs.

I've used the workaround in this answer to import jquery.

Here are my files:

In index.html:

      <table id="tableFlows" class="display" style="width:100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
          </tr>
        </tbody>
      </table>

in index.js:

import "./styles.scss";
import "@fortawesome/fontawesome-free/js/all";

import './workaround/import-jquery';
import './workaround/import-moment';

import 'moment-timezone';
import "tempusdominus-bootstrap-4";

import 'datatables.net-dt';

import "./flows.js";

In the console, i'm seeing this error:

The error comes from flows.js:

$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();

$('#buttonGo').on('click', function() {
  const moment1 = $("#datetimepicker1").datetimepicker('date');
  const moment2 = $('#datetimepicker2').datetimepicker('date');

  console.log(moment1.format('X'), moment2.format('X'));
});

$("#tableFlows").DataTable();

Please help.

Answer 1

In your index.js, use require( 'datatables.net-dt' )(); instead of your import