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!