Bootstrap & the Curious Case of jQuery Plugins

Hey Tim K.!

Ah yes, there's some confusing naming happening! So, a few things:

1) That './bootstrap' import is referring to a new "file that bootstraps some functionality" that Symfony provides in newer projects. So, it has nothing to do with "Bootstrap" the framework (that's the confusing naming part).

2) When you import 'bootstrap', that imports the Bootstrap JavaScript, not the Bootstrap CSS. To get the CSS, you'll want to do this same thing from inside a CSS file - https://symfonycasts.com/screencast/webpack-encore/css#referencing-em-just-em-the-package-name

Let me know if that helps! But the Bootstrap 5 JavaScript does, I believe, work a bit differently than in Bootstrap 4. So if you import it like you are doing here, it will not automatically the functions to jQuery (e.g. $('.some-element').dropdown()) like we show in this tutorial. That doesn't change anything about how Encore works - but I wanted you to be aware. That's the reason we explicitly mention to install version 4 (you can TOTALLY install version 5 if you want - but there may be a few differences).

Cheers!

thanks! It's working well now.

In case you or other might be interessted: As I try to avoid JQuery in my fresh project, I adapted the code a little bit to enable e.g. the usage of ToolTips

<b>app.js</b>
`
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

// start the Stimulus application
import './bootstrap'; // Remark: unfortunately called 'bootstrap', but it is not BOOTSTRAP (getbootstrap.com)

// load BOOTSTRAP's JavaScript (install with 'yarn add bootstrap --dev')
import * as bootstrap from 'bootstrap'; // Remark: "import 'bootstrap'" will not work e.g for ToolTips

// activate BOOTSTRAP-Tooltip everywhere
// see: https://getbootstrap.com/docs/5.1/components/tooltips/#example-enable-tooltips-everywhere
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

return new bootstrap.Tooltip(tooltipTriggerEl)

})
`

Thank you so, so much, this answer litterally got me out of desperation.

This saved my day!

Howdy Tomas!

I feel like every time I use Bootstrap in a project, I always run into issue's getting it to work correctly. But, I created a "template" so to speak that I use in just about all of my projects now when I reach for Bootstrap.

// package.json
{
    "devDependencies": {
        "@popperjs/core": "^2.11.5",
        "bootstrap": "^5.1.3",
        ...

// app.js

// any CSS you import will output into a single css file (app.css in this case)
import './scss/global.scss';       // I use SASS so this for the most part instead of vanilla CSS

// start the Stimulus application
import './bootstrap';

import { Popover } from 'bootstrap'; // eslint-disable-line no-unused-vars

// global.scss
// Configuration
@import "bootstrap/scss/functions";

@import "variable-overrides";    // This is just another scss file I overwrite bootstrap vars in
@import "bootstrap/scss/variables";

@import "map-overrides";        // Same for any Bootstrap Map overrides
@import "bootstrap/scss/maps";

@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
//@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/popover";
.......


// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";

I hope that helps, to answer your questions directly:

2) What diferrence is between require('bootstrap') and import * as bootstrap from 'bootstrap';

require('.....') was how we use to include additional JS into a file before ES6 which introduced the concept of "modules". With ES6, we can use import() other JS modules. They are sort of like using standard PHP functions vs Object Oriented PHP if that makes sense.

3) Is using import * as bootstrap from 'bootstrap'; correct?

You can do that, but I believe that will import all of the JS that is bundled with Bootstrap - which will result in larger file sizes for the end users. Personally, I prefer to only import exactly what I need from third-party libraries vs importing everything that library may provide.

Hello Jesse,

Thank you very much for your comment. Thank you for advice.

Regards
Tomas

Hey Ruslan!

I haven't tried this yet, but I just checked the code and it looks like it's a requirement that jQuery be defined on the window variable at the time that bootstrap is still imported. So, you'll need something like this before you import bootstrap:

const $ = import('jquery');
global.jQuery = $;
// global. should work - but you can try window. if it doesn't for some reason

import { Modal } from 'bootstrap';

Just be careful not to start relying on the global jQuery variable (i.e. import it whenever you need it). If you want to play it safe, you could probably unset the jQuery variable after importing from bootstrap - e.g. "delete global.jQuery".

Cheers!

Hey Ruslan!

Excellent question! Because if you looked at the bootstrap.js source code, you would find code that looks like this:

// the core bootstrap.js module
const Popper = import('popper.js');

// ...
Popper.createPopper(...);

This is a simplified version of what you would actually find there, but conceptually, it's correct. The point is: bootstrap.js itself imports and uses popper.js. All WE need to do is make sure that popper.js is downloaded into our project so that the import('popper.js') line in the bootstrap code doesn't fail.

Let me know if that helps :).

Cheers!

Hey Andynec

Have you watched this chapter? https://symfonycasts.com/sc...
I think you hit that bug with jQuery plugins. If it's not the case this thread may help you out https://github.com/froala/K...
Cheers!

Hey. Did watch that chapter now - but most of it i have done already, and the jquery was also set globally. Funny part is - that this line helped me out in app.js require('bootstrap/dist/js/bootstrap.bundle'); although i have also import './bootstrap'; Anyways - thanks for the response!

Interesting! I'm not sure why importing that file fixed your problem. I'll grant it to jQuery weirdness. Anyway, I'm glad to know you could fix your problem.
Cheers!

Hey Javier Quintana

Thanks for ping, Fix is on the way!

Cheers!

Hey Florent Hazard

Sometimes the building process may take a while, Webpack is getting smarter at compiling faster but it's still a heavy process. I'd recommend you to just run yarn dev (without the watcher) so the assets don't get compiler on every change, but the changes won't be applied until you manually compile again

Cheers!

Hey @Karl!

That's an excellent question! We talk about it in this other tutorial - https://symfonycasts.com/sc...

The short answer is that I *also* used to do this. And there is nothing wrong with it at all. But depending on how your JavaScript is organized, it may be completely redundant :).

Cheers!

Hey @cybernet2u!

This isn't my exact department here at SymfonyCasts (I don't deal too much with icons, CSS, etc), but I believe we handle FontAwesome by building our own custom pack on their site that only has what we need. I'm not sure if that's the only way or best way :p. If you're importing a package directly and only want to import the icons you want, then I think it would be up to you to manually import the files you need (if that's possible, given how the library is organized).

Cheers!