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

I fought with the same issue and found that you can have webpack automatically load modules — making them available to the various plugins as needed — via ProvidePlugin right in the webpack.config. Webpack's documentation covers the naked $ or jQuery instances…

webpack.config.js

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery'
        } )
    ]
};

But, as metaskopia found, Fancybox wants window.jQuery. To that end, the following worked:

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        } )
    ]
};