'Uncaught Unknown button type error when I create separate DataTable Js file in Laravel Mix

when I compile DataTable & Plugins in app.js file then it perfectly works. but I wants to compile DataTable & Plugins in separate Js file. then it shows me error like this Uncaught Unknown button type: print.

for compile DataTable & Plugins in separate file I am tried as below.

resource/js/app.js

require('./bootstrap');
//... other comman JS files as per my requirement

resource/js/bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

 try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
 } catch (e) {}
 
/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

resource/js/datatables/datatable.js

// DataTables & Plugins
window.$.fn.DataTable = require('datatables.net/js/jquery.dataTables');
// require('datatables.net-bs4')( window, $ );
window.$.fn.DataTable = require('datatables.net-bs4/js/dataTables.bootstrap4');
window.$.fn.DataTable.responsive = require('datatables.net-responsive/js/dataTables.responsive');
window.$.fn.DataTable.responsive = require('datatables.net-responsive-bs4/js/responsive.bootstrap4');
window.$.fn.DataTable.buttons = require('datatables.net-buttons/js/dataTables.buttons');
window.$.fn.DataTable.buttons = require('datatables.net-buttons-bs4/js/buttons.bootstrap4');

resource/js/datatables/datatablePlugins.js

// DataTables Plugins
window.JSZip = require('jszip/dist/jszip');
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
require('datatables.net-buttons/js/buttons.html5');
require('datatables.net-buttons/js/buttons.print');
require('datatables.net-buttons/js/buttons.colVis');

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    // .js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

mix.js('resources/js/datatables/datatable.js', 'public/js')
    .js('resources/js/datatables/datatablePlugins.js', 'public/js')
    .sass('resources/sass/datatables/datatable.scss', 'public/css');

then In View template file I load that script as like below

<html>
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="{{ asset('css/datatable.css') }}">
</head>
<body>
  // html code
</body>
<script src="{{ asset('js/datatable.js') }}"></script>
<script src="{{ asset('js/datatablePlugins.js') }}"></script>
<script>
$(function () {
   $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
   }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
 });
</script>
</html>

But when I run it in Browser then browser console show me this error
Uncaught Unknown button type: print

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Uncaught Unknown button type error when I create separate DataTable Js file in Laravel Mix

Sources

Related Questions