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.

wivku

Hi @allan, did you get a chance to look at this?

allan

Sorry - I hadn't clicked that you were using Parcel with the repo. Are you simply doing npm install; parcel index.html or something else?

Allan

wivku

correct, only doing npm install; parcel index.html

allan

Thanks - I had to use:

npm install pacel
./node_modules/parcel/bin/cli.js index.html

then it runs. The style import should just be:

@import 'datatables.net-dt';

But in the generated stylesheet that results in nothing being imported.

I filed this feature request on Parcel a while ago, but it looks like it hasn't been implement yet. Perhaps some votes for that feature would help.

Allan

wivku

Hi @allan , sorry, unclear to me what you are doing differently and if things are indeed working.

a) I have Parcel installed globally (npm install -g parcel-bundler), so that I can simply use the command parcel, instead of installing it locally (npm install parcel). I tried both, and both had the same result (parcel version: 1.12.3)

b) indeed, @import 'datatables.net-dt'; should be enough, I believe you confirmed that this is the workaround until that issue is resolved: @import 'datatables.net-dt/css/jquery.datatables.css';.
https://datatables.net/forums/discussion/comment/145310/#Comment_145310

With the workaround I get the correct DataTables CSS, but still have the other 3 original issues.

I have added a readme file to the test repository with all the details:
https://gitlab.com/wivaku/test-datatables-buttons/tree/master