bsBreakpoint is not defined

[Sogl]

Hello @Johann-S !

I tried to install your library to my BS4 project without success. I use laravel mix (webpack based) compilation.

All my js files:

becomes one another big app-landing.js file

that I include before </body>:

...
        </main>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <script src="{{ mix('landing/js/app-landing.js') }}"></script>
    </body>
</html>

app-landing.js (1st image) content:

require('./bootstrap');
require('./custom');

In bootstrap.js file I put your library line. Full file content:

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
    //!!!here
    require('bs-breakpoints');
    require('jquery.easing');

    //lg
    require('lightgallery');
    require('lg-zoom');

    //fontawesome
    require('./fontawesome');
} catch (e) {}

And in custom.js I put two lines:

...
//all loaded
$(document).ready(function() {
    console.log('loaded');
    bsBreakpoints.init();
    console.log(bsBreakpoints);
...

Finally in console:

What I'm doing wrong?

p.s. https://github.com/sachinchoolur/lightGallery library works fine in same situation.

[Johann-S]

Hi @Sogl,

First of all thanks for using (or trying to use) my libs 👍 😄

Here you have to do the same you did for jQuery, something like:

 window.bsBreakpoints = require('bs-breakpoints');

[Sogl]

Works like a charm. Thanks!

Now I have one another question.
Part of my code in custom.js with workaround and without your library:

$('nav').on('show.bs.collapse', function () {
    if (($(window).width() <= 991) && ($(window).scrollTop() <= 20)) {
        $("nav").addClass("bg-dark");
    }
});

How to clearly say in code that I want sizes "middle or smaller than middle"?
Like in sass @include media-breakpoint-down(md) { notation.

Do I need an object if ((bsBreakpoints.getCurrentBreakpoint() in ScreensObj)) { ... } or something to archieve that?

[Johann-S]

You can achieve that, like that:

var currentBreakPoint = breakPoints.detectBreakpoint()
if (currentBreakPoint === 'middle' || (currentBreakPoint === 'small' || currentBreakPoint === 'xSmall')) {

I hope it'll help you 👍

[Johann-S]

@Sogl if you have any other questions do not hesitate 👍