Owlcarousel2: Window binding (window.Zepto || window.jQuery) prevents from https://github.com/webpack/imports-loader usage

[nikolaybobrovskiy]

[daviddeutsch]

Hi @nikolaybobrovskiy - Can you give any details on how to fix this?

[nikolaybobrovskiy]

Can Zepto || jQuery (without window.) condition be used?

[foundryspatial-duncan]

This would be solved by this PR, which makes the module UMD-compliant: #1048

[Disorrder]

@foundryspatial-duncan and? How should I solve this issue temporary?

Upd.: Seems okay with import 'imports?window.jQuery=jquery!owl.carousel';

[Disorrder]

Installation guide is not correct!!
The one and the only way to make it work with Webpack:

import $ from 'jquery';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

window.jQuery = $;
require('owl.carousel');

[nikolaybobrovskiy]

I think the last 2 line could be replaced with

import 'imports?jQuery=jquery!own.carousel';

[mjarmoc]

Got simmilar issue. I am trying to load owl with webpack:

            plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery'
                }),
                new webpack.ProvidePlugin({
                    owlCarousel: 'owl.carousel'
                }),
            ],
            module: {
                loaders: [
                    {
                        test: require.resolve('owl.carousel'),
                        loader: "imports-loader?jQuery=jquery"
                    }
                ]
            },

I get an error:
Uncaught TypeError: Cannot read property 'fn' of undefined at:
$.fn.owlCarousel = function

The only way to load the plugin is the one mentioned by @Disorrder that is to use in a module explicitly:

window.jQuery = $;
require('owl.carousel');