Owlcarousel2: Can't import 'imports?jQuery=jquery!owl.carousel';

[joanbarrera]

I'm using Laravel with vue2 and I can't use this import. import 'imports?jQuery=jquery!owl.carousel';

The console returns:
Uncaught Error: Cannot find module "imports?jQuery=jquery!owl.carousel" at Object.defineProperty.value (app.js:16795) at __webpack_require__ (app.js:20) at Object.<anonymous> (app.js:63226) at __webpack_require__ (app.js:20) at Object.defineProperty.value (app.js:66) at app.js:69

[MrJohnDegu]

(Sorry if this long comment won't work on your side)

I encountered the same problem, but i'm using other stacks. I solved the problem by adding something to my

webpack.config.js

and added these code (this will create a variable that inherits all that the webpack have)

var webpack = require('webpack');

and then added another plugin in my module.exports (this will provide a plugin that you don't have to import the jquery library in your entry or other scripts, because this will provide the jquery library in three different variables $, jQuery, and window.jQuery, so whatever library that needs jquery in these three variables it is accessible by those libraries that is dependent to jquery)

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

so basically your webpack.config.js will look like this

var webpack = require('webpack');

module.exports = {
    entry: './your/entry/src.js',
    module: {
        loaders: [
         // your loaders
        ],
        rules:[
         // your rules
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    output:{
    // your output
    }
}

and then for your imports, you can basically import these on your index.js or what ever entry file you have.

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

[giovannipds]

@joanbarrera I was having the same problem and have used require('owl.carousel'); instead of import. Worked at least...

[giovannipds]

@MrJohnDegu on Laravel Mix, it should have been something like this:

const { mix } = require('laravel-mix');
const webpack = require('webpack');

/* Didn't work as expected */
mix
  .webpackConfig({
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  });

But for some reason that just didn't work, using this with browserSync made browserSync doesn't it even start it. I'd advice OwlCarousel's contributors to check the use of it with Laravel and make a receipt about it, because it's not being easy, unfortunately... =S

[milasevicius]

@giovannipds I am using Laravel Mix 1.4.2 version and your example worked well.

[giovannipds]

@milasevicius weird. As I'm kinda away from this issue, I do not really remember about it anymore. Anyway, I still think OwlCarousel contributors should make a receipt about it.

[giovannipds]

Ping @daviddeutsch, @tdecaluwe, @greg5green, @witrin.

[greg5green]

don't @ me

[giovannipds]

@greg5green just disregard it, so. 😒

[ncer]

This syntax imports?jQuery=jquery!owl.carousel means that you install webpack imports-loader in your project.

[prkirby]

@ncer You rock. Thanks!

[sapolio]

imports? does not work anymore (in any case, in webpack 3). now I have to write the full name of the loader.
So I write 'imports-loader?jQuery=jquery!owl.carousel', but $ is still not defined. Same with ?$=jquery!

other my plugins that use $ work if they are connected like this:
imports-loader$=jquery!./js/jquery_plugin
But Owl does not (

[SabatinoMasala]

I experienced the same issue, after some investigation I saw there were 2 versions of jQuery in my yarn.lock file:

[email protected], jquery@>=1.2.3, "jquery@>=1.7.1 <4.0.0", jquery@>=1.9.1:
  version "3.2.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"

jquery@>=1.8.3:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"

Owl carousel used the 3.3.1 version and the rest of the project used 3.2.1, you can verify this by looking at your node_modules path:
node_modules/owl.carousel/node_modules/jquery

Workaround

I bumped the jQuery version of my project to 3.3.1, this resolves the duplicate version resolution.

You can read more on this issue here:
https://github.com/yarnpkg/yarn/issues/3967#issuecomment-359299894

[pschaub]

Can somebody with enough knowledge about webpack and this issue update the README so every new user will understand how to use OwlCarousel2 with Webpack + ES6 imports?

[pascalporedda]

Added to the todo list.

[pascalporedda]

So I've updated the webpack readme part so it should be clear on how to use it.

If you are still encountering issues, let me know.