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

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?
Answers
Re #1: To get Datatables CSS I had to add to my
style.css
:Is that the correct way?
To be on the safe side I also import the other datatable CSS files:
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 thepackage.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.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
Here you go!
(it is a temporary repository, will remove once the issue is resolved/investigated)
https://gitlab.com/wivaku/test-datatables-buttons
and the result in my browser (note: no buttons)
@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
Sorry - I missed your previous reply. Thanks for the repo.
You are using the following Javascript directly in the browser:
If you look at the inspector in your browser you should see an erro such as:
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
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:
Hi @allan , so to be sure: I am not using the Javascript directly in the browser. It is being served and bundled by Parcel.