Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82029

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

$
0
0

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?


Viewing all articles
Browse latest Browse all 82029

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>