Symfony 5 + Webpack Encore + Bootstrap Table not exporting

Question

I am trying to add an exportable Bootstrap Table for each entity. But the export button is being displayed but still, it has no action while clicking over it.

I thought this could be some library issue but I guess the error is in my code.

Since its installation documentation is not "big" I will write the steps I followed:

1. Ran yarn add bootstrap-table

2. Added jQuery and other table export libraries inside /assets/app.js :

    import '../css/app.scss'; import $ from 'jquery'; global.$ = global.jQuery = $; import 'bootstrap'; import './tableExport.min.js'; import 'bootstrap-table'; import './bootstrap-table-export.min.js'; import './bootstrap-table-locale-es.js'; import '@fortawesome/fontawesome-free/css/all.min.css'; import '@fortawesome/fontawesome-free/js/all.js'; console.log('Webpack compilado');

3. To avoid some errors, this might be redundant with the previous step, I added jquery as a global variable to webpack.config.js :

    .autoProvidejQuery().autoProvideVariables({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', })

4. Added the HTML to the template: <table class="table"></table>

5. Added the JavaScript to the template:

    $('.table').bootstrapTable({ columns: [ {% block jsTableColumns %}{% endblock %}, { field: 'show', title: 'Acciones', formatter, align: 'center' } ], showExport: true, search: true, url: '/api/{% block jsApi %}{% endblock %}.json', pagination: true, {% block jsTableOptions %}{% endblock %} })

What am I missing?

Answer 1

I had the same problem. The solution I found is here https://symfony.com/blog/moving-script-inside-head-and-the-defer-attribute

In the.config/packages/webpack_encore.yaml replace defer to false

webpack_encore:
    script_attributes:
         defer: false