jQuery still needed in Bootstrap 5

We’ve been focused on making the migration from v4 to v5 more approachable, but we’ve also not been afraid to step away from what’s outdated or no longer appropriate. As such, we’re very happy to say that with v5, Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer . We’re sharpening our focus on building tools that are more future-friendly, and while we’re not fully there yet, the promise of CSS variables, faster JavaScript, fewer dependencies, and better APIs certainly feel right to us.

I thought BS5 does no require jQuery anymore? my understanding is it no longer need jQuery to use the components.

Maybe I missed anything to this? After I remove the jQuery, the components are not working.
@Norm

image

Good question, I’m looking forward to the answer.

Blocs with Bootstrap 5 will scan for jQuery references on export and will include it if needed.

Also are you sure you changed your project to Bootstrap 5 under project settings.

1 Like

Yes, Bootstrap 5 is set in project setting.

I was testing the alert component and it requires the jQuery to function.
Such component can be replace with vanilla JS so I was shocked to see jQuery needed.

I just tested on a project I am working on. The Alert Bric didn’t add jQuery for me. :thinking:

Could be something else causing it?

you could be using [Combine ALL JS]?

image

Nope I dont use combine all.

I got the jQuery.js when leaving the option unchecked.

When you say Alert Bric, which one are you using, because the built in one shouldn’t use any Javascript. There is another one called Sticky Alert in the Store.

you can see the jQuery in Inspector

1 Like

Are you sure its alert causing it. Because Site Search is listed on the store as BS4. It may have jQuery dependancies. Sorry I dont own the bric.

Failing that submit a bug report.

My conclusion is most of the components still uses jQuery and it is not fully able to exclude jQuery.
As jQuery is getting a lot criticism, I see this as a not good enough.

I hope in future Blocs can support vanilla JS

Norm has already stated that he has re-written all the javascript as vanilla.

3rd Party brics may still use jQuery.

I am using Bootstrap Alert so it should be using vanilla js right?

@Zixuan

Hey, I think I can see what’s causing it. @Norm will have to confirm that Blocs picks this up, and adds jQuery.

But the attribute being used for the Alert is from BS4, not BS5

Screen Shot 2021-05-19 at 5.43.06 PM

It should be

data-bs-dismiss="alert"
2 Likes

I found the post which mentioned the vanilla js. so not everything is re-written. I will test the ones that does not need jQuery.

Bootstrap 5 :rocket:
It’s here, but please remember the framework is actually still in beta . We have a feeling the official release may happen during the beta testing for Blocs 4.2, however, until then we do not recommend using Bootstrap 5 for live production sites.

Migration :dizzy:
You can migrate up to Bootstrap 5 but not backwards, so as this is a super early beta only migrate with backup projects and again don’t migrate and push to production , it’s way to soon for that. :no_entry:

To migrate, open a Bootstrap 4 project and head to project settings, you will see a new framework dropdown, change this and you are good to go!

Javascript Rewrite :writing_hand:
Almost all of the javascript Blocs generates for light boxes, special navigations, scrollFX etc has all been completely rewritten in vanilla JS so regardless of whether your project uses bootstrap 4 or 5, please test every feature of the site before you move it into production. It’s a big rewrite and there may be some issues in these early stages, that will break functionality once exported.

JS Updates :face_with_monocle:
Jquery and the lazyload javascript have both been updated to the latest versions.

You should be able to replicate the issue with Blocs version 4.2.0 - thru - version 4.2.2 by starting a BS5 project and simply adding a Structure 1 Column, as a vanilla test (though it has no relevance).

The issue appears to be with Project > Export Settings > Minify Bootstrap. When selected it results in no jQuery inclusion or export. By contrast when turned off it results in jQuery being included and exported. I tested the un-minified “bootstrap.bundle.js” & “bootstrap.css” that Blocs exports in a basic non-Blocs page and there are no calls or errors for jQuery, so all clean there.

So something appears wrong with some internal app logic within Blocs.


Minify Bootstrap = Yes [Results in no jQuery]:

Minify-Bootstrap-Yes

Minify-Bootstrap-Yes-Export


Minify Bootstrap = No [Results in jQuery being included]:

Minify-Bootstrap-No

Minify-Bootstrap-No-Inspection

Minify-Bootstrap-No-Export

:thinking: That seems to be where the basic issue resides to me. Though as Pete pointed out any BS4 related items should be removed from BS5 sites. Other things may also trigger the jQuery inclusion but the above demonstrates the issue on the most basic app level.

2 Likes

That’s an interesting find, @Blocs_User.

1 Like

Thanks for all the info on this folks, I will get this addressed in 4.3. Currently jQuery is added when forms (validation.js) are used and when the $ character is used in some javascript added as a page/project attachment.

There may be a glitch that is causing it to be added so I’ll take a look and update the thread when I find the cause.

1 Like