Bootstrap Table Error with Webpack: Cannot set properties of undefined

Question

I am trying to use the BootstrapTable library with Webpack. It seems related to how Jquery is being handled, but I am not 100% sure.

I am getting the following error (before I even try to add in any HTML Tables - but the example tables do not look processed either)

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

The vendor.js file looks as follows:

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

I've, also, tried:

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

My set-up seems to follow these instructions: https://bootstrap-table.com/docs/vuejs/webpack/

I've, also, tried to include Jquery by default using the webpack plug-ins

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

but this does not seem to matter.

Please help me figure out why I can not import this package.

---

Note: I think this is related to the Jquery import - I tried to import JQuery directly into my HTML File from a CDN before the "webpack bundle" and it fixed the error. But I would like to do this with Webpack correctly.

  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

Answer 1

It's because your jQuery is loaded after BootstrapTable, you have to reorder your js files. To solve this, create 2 files in, for example, a js folder in your assets

js/boootstrap-table.js

import 'bootstrap-table'

js/jquery.js

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

then in your app.js, load jquery before Bootstrap table

app.js

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