search

snapappointments / bootstrap-select

:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
https://developer.snapappointments.com/bootstrap-select/
MIT License
9.85k stars 2.72k forks source link

bootstrap is not defined using the latest beta #2720

Open samusaran opened 2 years ago

samusaran commented 2 years ago

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

I'm using:

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)

schulzj01 commented 2 years ago

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'
malohtie commented 2 years ago

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

LingaTigeen commented 1 year ago

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

In beta 3, we still have this issue

morganp-dev commented 1 year ago

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.

AnnoyingTechnology commented 1 year ago

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

JMACSilvestre commented 1 year ago

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

JMACSilvestre commented 1 year ago

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?

lindomar-pjs commented 2 months ago

Hi. Any solution for laravel+vite?