bootstrap-select icon indicating copy to clipboard operation
bootstrap-select copied to clipboard
verified publisher icon snapappointments

bootstrap is not defined using the latest beta

Open samusaran opened this issue 3 years ago • 9 comments

I'm currently trying to use bootstrap-select in a Power BI Visual (a self contained typescript app).

I'm using:

  • bootstrap-select: 1.14.0-beta2
  • bootstrap: 5.1.3
  • jQuery: 3.6.0

When I try to load the app the following error occurs:

Uncaught ReferenceError: bootstrap is not defined
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:66864
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:69450
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:66127
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:66131
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:69452
    __webpack_require__ https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:21
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:16380
    __webpack_require__ https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:21
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:40995
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:41021
    __webpack_require__ https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:21
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:40986
    __webpack_require__ https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:21
    dropDownSearchafeb36a4713049c88e660b96c9f9ce89_DEBUG https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:85
    <anonymous> https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT line 19 > injectedScript:88
    <anonymous> https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:19
    f https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:20
    loadWithoutResourcePackage https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:20
    executeMessage https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:20
    onMessageReceived https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:20
    m https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:20
    invokeHandler https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:19
    dispatchMessage https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:19
    onMessageReceived https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:19
    windowMessageHandler https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:19
    dispatch https://app.powerbi.com/13.0.17993.49/scripts/visualsandbox.minimal.externals.min.js:146
    handle https://app.powerbi.com/13.0.17993.49/scripts/visualsandbox.minimal.externals.min.js:146
    add https://app.powerbi.com/13.0.17993.49/scripts/visualsandbox.minimal.externals.min.js:146
    ke https://app.powerbi.com/13.0.17993.49/scripts/visualsandbox.minimal.externals.min.js:146
    each https://app.powerbi.com/13.0.17993.49/scripts/visualsandbox.minimal.externals.min.js:146
    each https://app.powerbi.com/13.0.17993.49/scripts/visualsandbox.minimal.externals.min.js:146
    ke https://app.powerbi.com/13.0.17993.49/scripts/visualsandbox.minimal.externals.min.js:146
    on https://app.powerbi.com/13.0.17993.49/scripts/visualsandbox.minimal.externals.min.js:146
    n https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:19
    createWindowMessageProxy https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:19
    createSandboxHost https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:20
    createSandboxHost https://app.powerbi.com/13.0.17993.49/scripts/customVisualsHost.bundle.min.js:20
    <anonymous> https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT:28
    EventListener.handleEvent* https://app.powerbi.com/13.0.17993.49/cvSandboxMinimal.html?locale=it-IT:26
cvSandboxMinimal.html:66864:20

Sadly I cannot use bootstrap <5 because I can't make it compile (i always get an error on the CSS compilation, that I don't get with bootstrap 5)

samusaran avatar Apr 07 '22 15:04 samusaran

I was seeing a similar issue when loading bootstrap-select in an import with webpack. I get this error only on the v2 beta as well. Not sure if it's the same issue, but hopefully it helps.

It was failing on this line: var Dropdown = window.Dropdown || bootstrap.Dropdown; in bootstrap-select.js.

I was able to work around it for the time being using the ProvidesPlugin to assign bootstrap's Dropdown directly to the window object.

webpack.config.js

new webpack.ProvidePlugin({
	'window.Dropdown': ['bootstrap','Dropdown'],
})

myModule.js:

import 'bootstrap-select'
import 'bootstrap-select/dist/css/bootstrap-select.css'

schulzj01 avatar Apr 19 '22 16:04 schulzj01

same issue in beta 2 and beta 3

var Dropdown = window.Dropdown || bootstrap.Dropdown; Uncaught ReferenceError: bootstrap is not defined

using: bootstrap-select: 1.14.0 bootstrap: 4 jQuery: 3.6.0

temporary fix by setting window.Dropdown = $.fn.dropdown

malohtie avatar Apr 25 '22 12:04 malohtie

window.Dropdown = $.fn.dropdown; doesn't seem to solve the issue.

In beta 3, we still have this issue

LingaTigeen avatar Jan 31 '23 08:01 LingaTigeen

I'm sharing the solution that worked for me for anyone who might still be struggling.

In the file where you import bootstrap-select, first import bootstrap and assign it to the window object.

const bootstrap = require('bootstrap');
window.bootstrap = bootstrap;
require('bootstrap-select');

This was tested with Bootstrap v5.2.3 and Bootstrap-select v1.14.0-beta3.

morganp-dev avatar May 09 '23 12:05 morganp-dev

Anyone found a workaround using Vite ? The solution proposed by morgan doesn't work in this context.

AnnoyingTechnology avatar Aug 04 '23 08:08 AnnoyingTechnology

Hi there! I'm having problems to run bootstrap-select v1.14.0-beta3 in vite laravel. Could anyone help me with this?

JMACSilvestre avatar Aug 15 '23 13:08 JMACSilvestre

I'm sharing the solution that worked for me for anyone who might still be struggling.

In the file where you import bootstrap-select, first import bootstrap and assign it to the window object.

const bootstrap = require('bootstrap');
window.bootstrap = bootstrap;
require('bootstrap-select');

This was tested with Bootstrap v5.2.3 and Bootstrap-select v1.14.0-beta3.

Can you help to implement in vite laravel?

JMACSilvestre avatar Aug 15 '23 13:08 JMACSilvestre