Owlcarousel2: importing 'owl.carousel' with webpack causes Uncaught TypeError: Cannot read property 'fn' of undefined

[cutelittleturtle]

I am trying to use Owl Carousel in my website managed by webpack and bootstrap3. I installed owlcarousel throughnpm install --save owl.carousel and I import the js file in a typescript file.

When I run gulp to compile the site, I got Uncaught TypeError: Cannot read property 'fn' of undefined

Reproduce problem

1. In my webpack config.js, I have (all the scripts are in .ts and compiled by webpack)

    module: {
      rules: [
        { test: /\.ts$/, use: 'ts-loader' },

1. In my main.ts file (entry point), I have

   import * as $ from 'jquery';
   import 'owl.carousel';

I cannot use import $ from 'jquery' as instructed because it causes error TS1192: Module '"jquery"' has no default export.

1. I have not implemented the carousel in my HTML yet. Just run gulp and I get

Uncaught TypeError: Cannot read property 'fn' of undefined
    at owl.carousel.js:1658
    at Object.<anonymous> (owl.carousel.js:1695)
    at Object.<anonymous> (owl.carousel.js:3273)
    at __webpack_require__ (bootstrap f72d2d9d08115c702cd7:19)
    at Object.<anonymous> (main.ts:13)
    at __webpack_require__ (bootstrap f72d2d9d08115c702cd7:19)
    at bootstrap f72d2d9d08115c702cd7:65
    at bootstrap f72d2d9d08115c702cd7:65
(anonymous) @ owl.carousel.js:1658
(anonymous) @ owl.carousel.js:1695
(anonymous) @ owl.carousel.js:3273
__webpack_require__ @ bootstrap f72d2d9d08115c702cd7:19
(anonymous) @ main.ts:13
__webpack_require__ @ bootstrap f72d2d9d08115c702cd7:19
(anonymous) @ bootstrap f72d2d9d08115c702cd7:65
(anonymous) @ bootstrap f72d2d9d08115c702cd7:65

The error points to line

    $.fn.owlCarousel = function(option) {

Installation reference

https://www.npmjs.com/package/owl.carousel

Related issue

A related issue from slick carousel can be found here. But unfortunately I have to use webpack to serve my site so I cannot "unwrap" owlcarousel from webpack compilation. But I suspect the reason might be similar.

Versions

• Gulp:
  CLI version 2.0.1
  Local version 3.9.1
• Webpack
  "webpack": "^2.2.1",
  "webpack-dev-middleware": "^1.10.0",
  "webpack-dev-server": "^2.3.0",
  "webpack-merge": "^2.6.1"
• typescript/jquery: 2.0.40
• Owl Carousel: 2.2.0

Update

I got no problem importing is through cndjs, with jquery imported first. So I guess the problem might be the way jquery is handled by webpack or the import * as $ from 'jquery'..

[pascalporedda]

Hey @cutelittleturtle,

I will have a look at this and come back if I got anything to clear this up.

[pschaub]

Same issue here, any idea?

[pascalporedda]

As in #1866 I already added this to my todo list and will take care of it. Probably this weekend.

[pascalporedda]

@cutelittleturtle and @pSchaub I have updated the installation instructions for webpack in the README file, you should be able to get this to work now.

[cutelittleturtle]

@pascalporedda thanks. i will check when I got the chance!

[peterremote1980]

don't use import * as $ from 'jquery';

in config.json, add

"externals": {
    "jquery": "https://code.jquery.com/jquery-3.3.1.min.js"
}

[mortezasabihi]

by writing this code:

let owl_carousel = require('owl.carousel');
window.fn = owl_carousel;

it fiexd :)

[behnamazimi]

You should add this code in your webpack config:

    plugins: [
        new Webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
    ],
...

[Venegrad]

Anyone know how to do this with rollup?

[lucaszmoraes]

anyone could help? same problem here - and @behnamazimi solutions didnt work out

[raysk4ever]

try installing jquery first in the project or simply call the jquery cdn in index.html

[felipealvares]

Add on your module exports this code:
`
plugins: [

       new webpack.ProvidePlugin({

              $: "jquery",

              jQuery: "jquery",

             "window.jQuery": "jquery"

      })

],
`

[agonqorolli]

these three ProvidePlugin's properties are required

   plugins: [
        new Webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
    ]

I was missing only 'window.jQuery': 'jquery' and the error was still persisting.

[muhatas]

Webpack worked when it was in lowercase.

You should add this code in your webpack config:

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

[keval2605]

dont import jquery as (import $ from 'jquery'), instead in webpack.config file :
const webpack = require("webpack");
.....
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
]

this works perfectly alright.

[ajeetsonkar]

How to resolved this.