using Parcel bundler: no CSS, no buttons, unknown button type, build error fs?

wivku

A couple of questions / issues when using Datatables in combination with Parcel bundler.
I am quite new to bundlers, especially Parcel. So apologies if I misunderstand the instructions.

Context: using simple example that uses <table> as datatable:

$('#example').DataTable( {
    dom: 'Bfrtip',
    select: true,
    buttons: [
        'copy', 'excel', 'pdf'//, 'selectAll', 'selected'
    ]
} );

I used the Datatables download tool (1. framework: DataTables, 2 packages: jQuery 3, DataTables; extensions: Buttons, HTML5 export, JSZip, pdfmake, Print view, Responsive, Select).

When using download method CDN everything works as expected.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>

When using download method Yarn I have several issues. I followed the instructions: added the modules (yarn add), and added the requires to the app.js:

var $  = require( 'jquery' );

require( 'jszip' );
require( 'pdfmake' );

require( 'datatables.net-dt' )();
require( 'datatables.net-buttons-dt' )();
require( 'datatables.net-buttons/js/buttons.html5.js' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-responsive-dt' )();
require( 'datatables.net-select-dt' )();

1) CSS is not loaded?

I don't see any Datatables CSS being loaded.

2) no buttons are displayed

None of the buttons are displayed / visible in the source code.

3) selectAll, selected, print, give Uncaught Unknown button type

When I e.g. add selected, selectAll or print I get in the log e.g.: Uncaught Unknown button type: selectAll

4) pdfmake gives fs error on build

<path>/node_modules/pdfkit/js/image.js:32:33: Cannot statically evaluate fs argument
<path>/node_modules/png-js/png-node.js:45:29: Cannot statically evaluate fs argument
<path>/node_modules/fontkit/index.js:43:31: Cannot statically evaluate fs argument
<path>/node_modules/pdfkit/js/font/afm.js:11:41: Cannot statically evaluate fs argument

Could be this is related to https://github.com/parcel-bundler/parcel/issues/432
I tried @import 'datatables.net-dt' but that had no effect (CSS still not loaded).
I don't get the mentioned error message (main.css:2.1).

It refers to a blog post, I have the feeling that was not created yet?

wivku

Re #1: To get Datatables CSS I had to add to my style.css:

@import 'datatables.net-dt/css/jquery.datatables.css';

Is that the correct way?

To be on the safe side I also import the other datatable CSS files:

@import 'datatables.net-responsive-dt/css/responsive.dataTables.css';
@import 'datatables.net-select-dt/css/select.dataTables.css';
@import 'datatables.net-buttons-dt/css/buttons.dataTables.css';

allan

Re #1: To get Datatables CSS I had to add to my style.css:
Is that the correct way?

Frustratingly yes. I've tried Parcel out a few times myself and as of yet haven't been able to make it load styles from the modules (e.g. just using @import 'datatables.net-dt';). The information for that is in the package.json file, and what I've read suggests that it can be made to work, but I've not found the right combination to make that work in Parcel yet. That's why I've not yet published a blog post about it.

no buttons are displayed

I'd need a link to the page showing the issue to be able to help debug that one.

Actually the same with the others. Could you publish the result on the web somewhere?

Allan

wivku

Here you go!
(it is a temporary repository, will remove once the issue is resolved/investigated)

https://gitlab.com/wivaku/test-datatables-buttons

wivku

and the result in my browser (note: no buttons)

wivku

@allan no rush, but I was wondering if that was the info you were looking for. And of course, if there is news: love to hear it

allan

Sorry - I missed your previous reply. Thanks for the repo.

You are using the following Javascript directly in the browser:

require( 'jszip' );
// require( 'pdfmake' );

require( 'datatables.net-dt' )();
require( 'datatables.net-buttons-dt' )();
require( 'datatables.net-buttons/js/buttons.html5.js' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-responsive-dt' )();
require( 'datatables.net-select-dt' )();


$('#example').DataTable( {
    dom: 'Bfrtip',
    select: true,
    buttons: [
        'copy', 'excel', 'pdf',// 'selectAll', 'selected'
    ]
} );

If you look at the inspector in your browser you should see an erro such as:

app.js:3 Uncaught ReferenceError: require is not defined
at app.js:3

Indeed require is not a built in method. You would need to use an AMD loader such as RequireJS there.

However, in the HTML you have the CDN lines commented out - you could just use them and drop your require lines to have the table render as expected.

Allan

wivku

No worries @allan . Thanks for looking into it.
Not sure I understand what you write.

I am using Parcel to serve the page: parcel index.html (serves it on port 1234). I don't get an error message in the inspector, and the table itself renders fine (see footer, sort arrows and search field). See screenshot.

The commented out CDN code was to show that the equivalent CDN does work. The goal is to not use CDN but use Parcel to bundle it all. That's what the 4 issues are related to.

Note the (small) version mismatch:

$ yarn -s info datatables version
1.10.18

console.log("jQuery version: "+ $.fn.jquery );
console.log( "datatables version: "+ $.fn.dataTable.version );
jQuery version: 3.3.1
datatables version: 1.10.19

wivku

Hi @allan , so to be sure: I am not using the Javascript directly in the browser. It is being served and bundled by Parcel.