Webpack - $(...).slick is not a function

Hello,

I’m trying to use webpack to bundle all my js files and libraries. So far it works well for other plugins but when calling and using slick, I’m getting a: Uncaught TypeError: $(…).slick is not a function

Main JS file codes:

global.jQuery = require('./vendor/jquery/dist/jquery');
window.$ = global.$ = global.jQuery;

//Add bootstrap & libraries
require('./vendor/bootstrap/dist/js/bootstrap');
require('./vendor/slick-carousel/slick/slick');

$(document).ready(function(){

  $(".slider").slick({
    infinite: false
  });
});

ps: “vendor” is the custom name given for “bower_components”

my webpack config:

var config = {
  watch: false,
  output: {
    filename: 'app.js'
  },
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      mangle: {
        except: ['$super', '$', 'exports', 'require']
      },
      output: {
        comments: false
      }
    })
  ],
  devtool: 'source-map'
}

What is observed behaviour?

Slick carousel is not being executed.

More Details

• Which browsers/versions does it happen on? Chrome 49 Firefox 44.0.2
• Which jQuery/Slick version are you using? jQuery 2.2.3/Slick 1.5.9
• Did this work before? Yes, before webpack integration

[umarmw]

Hello,

I’ve found the fix for the issue; it by declaring jquery as global in the webpack configuration:

http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack

Point 2:

var webpack = require("webpack");

    ...

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

Thanks

[noomz]

or just

import $ from 'jquery';

import 'slick-carousel';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';