How to use remodal with webpack?

[panteng]

Below is my code. I use Webpack to bundle them.

require('remodal/dist/remodal.css');

var $ = require('jquery');

require('remodal');

module.exports = {
    bind: function () {
        var _this = this;

        _this.instanse = $(_this.el).remodal();
    },
    unbind: function () {
        var _this = this;

        _this.instance.destroy();
    }
};

But there's something wrong. The console says:

Uncaught TypeError: $(...).remodal is not a function

Could anyone help me? Thanks.

[rdpascua]

What I have is this

var $ = require('jquery');
import 'remodal'

[panteng]

@rdpascua Thx.

I found the reason. It was because my NPM is outdated.

Npm v.2.x.x installs nested dependencies. That means I have two jquery packages in my node_modules folder. One is for Remodal (node_modules/remodal/node_modules/jquery/), the other is for the whole app(node_modules/jquery).

So when I call var $ = require('jquery'), actually I am not requiring the same jquery that Remodal requires. That's why the chrome console says Uncaught TypeError: $(...).remodal is not a function

[andrebautista]

I'm loading my jQuery from a CDN using the $script loader and then requiring remodal after the dependency, jquery and $, have been defined.

$script("https://code.jquery.com/jquery-1.12.3.min.js", function() {
    window.fcJq = jQuery.noConflict(true);
    requirePackage("jquery");
    var remodal = require('remodal');
});

[panteng]

@andrebautista Thank you. This problem has been solved.