我正在尝试更新 symfony 项目及其节点插件。我刚刚发现，在运行我的应用程序时，我收到一个关于 Uncaught bootstrap (not work after that) 表的 webpack 错误，其中显示
TypeError: t is undefined
bootstrap-table.min.js:10
通过将 asset/app.js 中的
bootstrap-table.min.jsbootstrap-table.js$$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;
});
});
我尝试更新依赖项，重新安装它们。 我发现了这一点：https://symfony.com/blog/moving-script-inside-head-and-the-defer-attribute，所以我在 webpack_encore.yaml 中将 defer 值更改为 true，并将脚本标记现在有
defer=""=""我在 Symfony 6 应用程序中遇到了与 Bootstrap-table 相同的问题，但现在它可以工作了。
// 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"
}
}
这里有趣的是：bootstrap-table 和 jQuery。我用过 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';
在 webpack.config.js 中，取消注释以下内容：
// webpack.config.js
Encore
...
.autoProvidejQuery()
;
显然，请确保
base.html.twig我希望这有帮助。