Symfony 6集成bootstrap-table经Webpack编译报错求助

升级Symfony项目及Node依赖后，运行应用时出现Webpack相关未捕获错误，导致bootstrap-table失效，错误信息如下：

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

将assets/app.js中的bootstrap-table.min.js替换为未压缩的bootstrap-table.js后，定位到错误出自第1498行的$$o对象：

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

项目配置信息 #

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.*"
    }

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;
    });
});

已尝试的解决方案 #

• 更新并重新安装所有PHP及Node依赖
• 修改webpack_encore.yaml中的defer属性为true，确保生成的script标签带有defer=""属性

目前错误仍存在，bootstrap-table无法正常工作，求排查思路或解决方案。

内容的提问来源于stack exchange，提问作者matt