How to use fancybox with webpack?

Question

I\'m currently developing a webpage and started using webpack in my build process. I\'ve managed to use slick-carrousel plugin downloaded via npm but can\'t make fancybox to

Answer 1

Ok. I managed to solve the problem like this.

First, I realized that I installed Fancybox 2 instead of Fancybox 3 so I uninstalled the first and installed the last (Thanks to @Mikhail Shabrikov for making me realize that!).

npm uninstall fancybox --save-dev
npm install @fancyapps/fancybox --save

Second, I dig through Fancybox original code and saw that it requires jQuery to be passed to it as window.jQuery and not $ so in my requires I did this:

var $ = require("jquery");
window.jQuery = $;  <-- This is what do the magic!!
var slick = require("slick-carousel");
require("@fancyapps/fancybox");

And voila! Everything works now.