Webpack 的引导表错误:无法设置 undefined 的属性

Bootstrap Table Error with Webpack: Cannot set properties of undefined

提问人:user1168077 提问时间:8/26/2023 更新时间:9/21/2023 访问量:98

问:

我正在尝试将 BootstrapTable 库与 Webpack 一起使用。这似乎与Jquery的处理方式有关,但我不是100%确定。

我收到以下错误(在我尝试添加任何 HTML 表格之前 - 但示例表格看起来也没有处理)

Uncaught TypeError: Cannot set properties of undefined (setting 'BootstrapTable')
    at bootstrap-table.js:8541:21
    at bootstrap-table.js:4:102
    at ./node_modules/bootstrap-table/dist/bootstrap-table.js (bootstrap-table.js:5:2)
    at __webpack_require__ (bootstrap:19:1)
    at vendors-8eb79120f29fcd7dbd35.js:32570:97
    at vendors.js:4:20
    at vendors.js:4:20

供应商.js文件如下所示:

import jQuery from 'jquery'
window.jQuery = jQuery;
import '@popperjs/core';
import 'bootstrap';
import 'bootstrap-table/dist/bootstrap-table.js'

我也试过:

import $ from 'jquery';
window.jQuery = $;
global.jQuery = $;
window.$ = $;

我的设置似乎遵循以下说明: https://bootstrap-table.com/docs/vuejs/webpack/

我也尝试使用 webpack 插件默认包含 Jquery

  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),

但这似乎并不重要。

请帮我弄清楚为什么我无法导入此包。


注意:我认为这与 Jquery 导入有关 - 我尝试在“webpack bundle”之前将 JQuery 直接从 CDN 导入到我的 HTML 文件中,它修复了错误。但我想用 Webpack 正确地做到这一点。

  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
jquery twitter-bootstrap webpack 引导表

评论

0赞 Raxel21 8/26/2023
这可能有助于您 外部 |Webpack的

答:

0赞 Falco 9/21/2023 #1

这是因为你的jQuery是在BootstrapTable之后加载的,你必须对你的js文件重新排序。 要解决此问题,请在资产中的 js 文件夹中创建 2 个文件,例如

js/boootstrap-table.js

import 'bootstrap-table'

js/jquery.js

import $ from 'jquery';
global.$ = $;
global.jQuery = $;

然后在 app.js 中,在 Bootstrap 表之前加载 jquery

应用.js

import './js/jquery';
import './js/bootstrap-table'