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?
![wivku](https://secure.gravatar.com/avatar/d336c0e219f095e365c04f15e10edb98/?default=https%3A%2F%2Fvanillicon.com%2Fd336c0e219f095e365c04f15e10edb98_200.png&rating=g&size=120)
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.
Hi @allan, did you get a chance to look at this?
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
correct, only doing
npm install; parcel index.html
Thanks - I had to use:
then it runs. The style import should just be:
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
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 commandparcel
, 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