ES6 + jasny-bootstrap - Error: Cannot find module jasny-bootstrap?

400 views Asked by At

How can I import jasny-bootstrap into my ES6 class?

ES6:

'use strict';

import $ from 'jquery';
import jasny from 'jasny-bootstrap';

class PushMenu {
    constructor() {
        this.slideShown = false;
        $('.navmenu').on('shown.bs.offcanvas', () => {
            this.slideShown = true;
        });
    }
}

I get an error when I try to compile it with gulp:

{ Error: Cannot find module 'jasny-bootstrap' from '/var/www/my-project/js'

I am sure I have already installed it with npm following its npm page:

npm install jasny-bootstrap

Any ideas why and how to resolve this?

EDIT:

I managed to load it manually with the full path:

import jasny from '../node_modules/jasny-bootstrap/dist/js/jasny-bootstrap';

But it does not work with no error hinted.

EDIT 2:

I have tried to glue it with:

jQueryBridget('jasny', Jasny, $); 

but still no luck. Error:

Uncaught TypeError: Cannot read property 'option' of undefined

The entire code:

'use strict';

import $ from 'jquery';
import bootstrap from 'bootstrap';
import Jasny from '../node_modules/jasny-bootstrap/dist/js/jasny-bootstrap.js';
import jQueryBridget from 'jquery-bridget';

jQueryBridget('jasny', Jasny, $);

class PushMenu {
    constructor() {
        this.slideShown = false;
        $('.navmenu').on('shown.bs.offcanvas', () => {
            this.slideShown = true;
        });
    }
}
1

There are 1 answers

0
Run On

It does not work with ES6 import but works with:

<script src="vendor/jasny-bootstrap/jasny-bootstrap.js"></script>

Then without importing it:

class PushMenu {
    constructor() {
        this.slideShown = false;
        $('.navmenu').on('shown.bs.offcanvas', () => {
            this.slideShown = true;
        });
    }
}

Not ideal.