Uncaught TypeError: Cannot set properties of undefined (setting 'BootstrapTable')

[ahmedtoolapp]

Bootstraptable version(s) affected

1.22.2

Description

Hello,

I'm used to using this plugin, but this time I'm stuck on the first use.
I installed latest version of jQuery 3.7.1 and latest version of Bootstrap 5.3.2 and latest version of Bootstrap-table 1.22.2

All this in a new symfony 6 project with a new installation of webpack 5.74.0, node v21.1.0 and npm

in my app.js file I did:
const $ = require('jquery');
require('bootstrap');
import 'bootstrap-table/dist/bootstrap-table.js';
import 'bootstrap-table/dist/locale/bootstrap-table-fr-FR.js';

and in my js file
const table = $("#table");
Table.bootstrapTable(....)

First thing I got the message
Uncaught TypeError: Cannot set properties of undefined (setting 'BootstrapTable')

I tried to modify how to import jQuery and bootstrap
import jQuery from 'jquery'
window.jQuery = jQuery
window.bootstrap = require('bootstrap');

Unfortunately it doesn't change anything, I tried to use the cdn directly in the base html file, I no longer have the error but in the js file where I declare the table I have the message:
bootstrap is not a function

any ideas why it doesn't work please

Example(s)

app.js

const $ = require('jquery');
require('bootstrap');
import 'bootstrap-table/dist/bootstrap-table.js';
`import 'bootstrap-table/dist/locale/bootstrap-table-fr-FR.js';

file.js
const table = $("#table");
const data = [ { 'id': 0, 'name': 'Item 0', 'price': '$0' }, { 'id': 1, 'name': 'Item 1', 'price': '$1' }, { 'id': 2, 'name': 'Item 2', 'price': '$2' }, { 'id': 3, 'name': 'Item 3', 'price': '$3' }, { 'id': 4, 'name': 'Item 4', 'price': '$4' }, { 'id': 5, 'name': 'Item 5', 'price': '$5' } ]
table.bootstrapTable({data: data})
`

Possible Solutions

No response

Additional Context

Symfony 6 / php 8.2.15
"webpack": "^5.74.0",
symfony/webpack-encore": "^4.5.0"
bootstrap": "^5.3.2"
bootstrap-table": "^1.22.2",
jquery": "^3.7.1",

Node : v21.1.0
npm 10.2.0

[ahmedtoolapp]

UP

[ahmedtoolapp]

Try to find a solution for my problem
I only succeeded when downgrading to the version 1.21.2

This still a bug for me until someone have any idea.

[wenzhixin]

You can check out our webpack starter example: https://github.com/wenzhixin/bootstrap-table-examples/tree/develop/webpack-starter.

[bplatypus]

I also think this is a bug. Had the exact same error "Uncaught TypeError: Cannot set properties of undefined (setting 'BootstrapTable')", but with some different stack. I just figured out how to make it work after quite some hours struggling yesterday.

I'm using:
vitejs
jquery
bootstrap-table

I'm using vite.config.js to inject jquery, so I had this (which is NOT working after build):

> import { defineConfig } from 'vite'
> import inject from '@rollup/plugin-inject';
> 
> export default defineConfig({
>     build: {
>         outDir: './../../output/web',
>         minify: true
>     },
>     plugins: [
>         inject({
>             $: 'jquery',
>             jQuery: 'jquery'
>         })
>     ]
> })

and in the '.js' file which is using bootstrap-table, I had the standard imports:

> import 'bootstrap'
> import 'bootstrap-table' 

This is working OK if I run 'npm run dev' BUT when I was building the project using 'npm run build', I started to get this "Uncaught TypeError: Cannot set properties of undefined (setting 'BootstrapTable')" error.

Solution for me was

1. Remove

jQuery: 'jquery'

from the 'vite.config.js'

2. Remove the imports from the '.js' file where bootstrap-table was used
3. Put the imports in the main.js
4. AFTER 'bootstrap' imports, add

window.jQuery = $

To resume, my 'vite.config.js' is now like this:

> import { defineConfig } from 'vite'
> import inject from '@rollup/plugin-inject';
> 
> export default defineConfig({
>     build: {
>         outDir: './../../output/web',
>         minify: true
>     },
>     plugins: [
>         inject({
>             $: 'jquery'
>         })
>     ]
> })

And my main.js:

> import 'bootstrap'
> import 'bootstrap-table'
> 
> window.jQuery = $

And NO other 'bootstrap' imports in my '.js' file.

edit: I also tried to inject bootstrap in vite.config.js, but this was not working either.

[wenzhixin]

Have you solved your problem?

[trandbert37]

Same problem for me with Webpack

[dpoerschke]

Same here. Version 1.21.2 is working for me but not the current one. Thanks @ahmedtoolapp for the hint!

[UtechtDustin]

@trandbert37 @dpoerschke @ahmedtoolapp
Could some one of you please provide us an minimal setup repository for testing purposes ?
That would be great, thank you!

[studplus]

Check your imports.
You got to load jquery before importing bootstrap.

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>

it worked for me on a plane html-template

[wenzhixin]

Fixed in the examples repo with updated bootstrap and webpack to the latest version: https://github.com/wenzhixin/bootstrap-table-examples/pull/535/files