bootstrap-table with symfony 6 throught webpack not compiling

Question

I'm trying to update a symfony project and its nodes plugins. I just discovered that when running my app, I get a webpack error about Uncaught bootstrap (not working after that) table saying

TypeError: t is undefined
bootstrap-table.min.js:10

by changing bootstrap-table.min.js to bootstrap-table.js in assets/app.js, I know the error is about $$o from line 1498 :

$$o.BootstrapTable = BootstrapTable;
$$o.fn.bootstrapTable = function (option)

configuration :

in composer.json

"require": {
        "php": ">=8.1",
        "ext-ctype": "*",
        "ext-gd": "*",
        "ext-iconv": "*",
        "ext-intl": "*",
        "composer/package-versions-deprecated": "1.11.99.1",
        "doctrine/annotations": "^1.0",
        "doctrine/doctrine-bundle": "^2.2",
        "doctrine/doctrine-fixtures-bundle": "^3.4",
        "doctrine/doctrine-migrations-bundle": "^3.0",
        "doctrine/orm": "^2.8",
        "friendsofsymfony/jsrouting-bundle": "^3.0",
        "imagine/imagine": "^1.2",
        "phpdocumentor/reflection-docblock": "^5.2",
        "phpoffice/phpspreadsheet": "^1.22",
        "symfony/asset": "6.2.*",
        "symfony/console": "6.2.*",
        "symfony/dotenv": "6.2.*",
        "symfony/expression-language": "6.2.*",
        "symfony/flex": "^2.0.0",
        "symfony/form": "6.2.*",
        "symfony/framework-bundle": "6.2.*",
        "symfony/http-client": "6.2.*",
        "symfony/intl": "6.2.*",
        "symfony/mailer": "6.2.*",
        "symfony/mime": "6.2.*",
        "symfony/monolog-bundle": "^3.1",
        "symfony/notifier": "6.2.*",
        "symfony/process": "6.2.*",
        "symfony/property-access": "6.2.*",
        "symfony/property-info": "6.2.*",
        "symfony/proxy-manager-bridge": "6.2.*",
        "symfony/runtime": "6.2.*",
        "symfony/security-bundle": "6.2.*",
        "symfony/security-core": "6.2.*",
        "symfony/serializer": "6.2.*",
        "symfony/string": "6.2.*",
        "symfony/translation": "6.2.*",
        "symfony/twig-bundle": "6.2.*",
        "symfony/ux-chartjs": "^2.0",
        "symfony/validator": "6.2.*",
        "symfony/web-link": "6.2.*",
        "symfony/webpack-encore-bundle": "^1.11",
        "symfony/yaml": "6.2.*",
        "symfonycasts/reset-password-bundle": "^1.7",
        "twig/extra-bundle": "^2.12|^3.0",
        "twig/intl-extra": "^3.3",
        "twig/twig": "^2.12|^3.0"
    },
    "require-dev": {
        "symfony/browser-kit": "6.2.*",
        "symfony/css-selector": "6.2.*",
        "symfony/debug-bundle": "6.2.*",
        "symfony/maker-bundle": "^1.0",
        "symfony/phpunit-bridge": "6.2.*",
        "symfony/stopwatch": "6.2.*",
        "symfony/var-dumper": "6.2.*",
        "symfony/web-profiler-bundle": "6.2.*"
    }

in package.json :

"dependencies": {
        "@fortawesome/fontawesome-free": "^6.4.0",
        "@symfony/stimulus-bridge": "^3.2.2",
        "@symfony/webpack-encore": "^4.3.0",
        "chart.js": "^4.3.0",
        "core-js": "^3.30.1",
        "leaflet": "^1.9.3",
        "popper.js": "^1.16.1",
        "regenerator-runtime": "^0.13.11",
        "sass": "^1.62.1",
        "sass-loader": "^13.2.2",
        "select2": "^4.1.0-rc.0",
        "stimulus": "^3.2.1",
        "webpack-jquery-ui": "^2.0.1",
        "webpack-notifier": "^1.15.0"
    },
"devDependencies": {
        "@hotwired/stimulus": "^3.2.1",
        "@popperjs/core": "^2.11.7",
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/assets",
        "bootstrap": "^5.2.3",
        "bootstrap-table": "^1.21.4",
        "chart.js": "^4.3.0",
        "jquery": "^3.7.0",
        "stimulus": "^3.2.1"
    }

app.js :

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

const $ = require('jquery');
global.$ = global.jQuery = $;
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');

// this "modifies" the jquery module: adding behavior to it
// the bootstrap module doesn't export/return anything
require('bootstrap');

// bootstrap-table: https://bootstrap-table.com/
import 'bootstrap-table/dist/bootstrap-table.min.css';
import 'bootstrap-table/dist/bootstrap-table.min.js';
import 'bootstrap-table/dist/locale/bootstrap-table-fr-FR.js';
import 'bootstrap-table/dist/locale/bootstrap-table-en-US.js';

require('select2');
import 'select2/dist/css/select2.min.css';

// fontawesome: https://fontawesome.com/
require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.js');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});

// tabs anchor management
$(document).ready(function() {
    let hash = document.location.hash;
    if (hash) {
        $('.nav-tabs .nav-item a[href="' + hash + '"]').tab('show');
    }

    $('.nav-tabs .nav-item a').on('click', function (e) {
        window.location.hash = e.target.hash;
    });
});

I tried to update dependencies, to reinstall them. I discovered this : https://symfony.com/blog/moving-script-inside-head-and-the-defer-attribute, so I went to change defer value to true in webpack_encore.yaml, and the script tags now has defer="" attribute (I don't really know why there is =""), but I still have the error, and the bootstrap-table things are still not working. Does anyone has an idea of what to try, or what could cause that? thank you

Answer 1

I was having the same issue with Bootstrap-table in my Symfony 6 app but it works now.

// package.json
{
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@symfony/webpack-encore": "^4.0.0",
        "bootstrap": "^5.3.2",
        "bootstrap-table": "^1.22.1",
        "core-js": "^3.23.0",
        "jquery": "^3.7.1",
        "regenerator-runtime": "^0.13.9",
        "sass": "^1.69.3",
        "sass-loader": "^13.3.2",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-notifier": "^1.15.0"
    }
}

What's interesting here : bootstrap-table & jQuery. I used npm (npm install bootstrap-table jquery --save-dev)

// assets/styles/app.scss

@import "~bootstrap";
@import "~bootstrap-table";

// assets/app.js

// To import the style in app.scss
import './styles/app.scss';

// To import the JS from node_modules
import 'bootstrap';
import 'bootstrap-table/src/bootstrap-table';

In webpack.config.js, uncomment the following :

// webpack.config.js

Encore
   ...
   .autoProvidejQuery()
;

And obviously, make sure you have the encore_entry tags in base.html.twig.

I hope this helps.