slick: 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

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17

Most upvoted comments

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

+30

umarmw on May 2, 2016

or just

import $ from 'jquery';

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

+22

noomz on Oct 3, 2016

script-loader did the trick for me:

window.$ = window.jQuery = require('jquery');
require('script!slick-carousel');

$(...).slick(...);

+20

webkonstantin on Oct 25, 2016

Hi. I found solution which works for me:

add to js file:

 import $ from 'jquery';
 import 'slick-carousel';

add to scss file:

 $slick-font-path: "/node_modules/slick-carousel/slick/fonts/" !default;
 $slick-font-family: "slick" !default;
 $slick-loader-path: "/node_modules/slick-carousel/slick-carousel/slick/" !default;
 $slick-arrow-color: black !default;
 @import "~slick-carousel/slick/slick.scss"; 
 @import "~slick-carousel/slick/slick-theme.scss";

mak633 on Aug 6, 2018

Hello, after some investigation I’ve found out that by commenting the first block of code and leaving the else part, fixed the issue, as below:

(function(factory) {
    'use strict';
    //if (typeof define === 'function' && define.amd) {
    //    define(['jquery'], factory);
    //} else if (typeof exports !== 'undefined') {
    //    module.exports = factory(require('jquery'));
    //} else {
        factory(jQuery);
    //}
}

I’ll keep on digging, but if any of you have an idea, it would be appreciated.

Thanks,

😃

umarmw on May 1, 2016

@chbdetta I’m using slick-carousel-browserify script instead of slick-carousel

indapublic on Aug 2, 2017

window.$ = window.jQuery = require('jquery'); // or import $ from 'jquery';

import 'script!slick-carousel';

Uncaught ReferenceError: jQuery is not defined at eval (eval at module.exports

When import changed to

import 'slick-carousel';

no import errors, but receive

TypeError: $(…).slick is not a function

indapublic on Jul 30, 2017

updated in master

leggomuhgreggo on Aug 2, 2017

I have the same error here,

TypeError: $(…).slick is not a function

I install package with npm And with expose-loader to expose jquery to window.$ and window.jQuery. By debugging, I find out the slick has its own copy of jquery

(function(factory) {
  "use strict";
  if (typeof define === "function" && define.amd) {
    define(["jquery"], factory);
  } else if (typeof exports !== "undefined") {
    module.exports = factory(require("jquery"));
  } else {
    factory(jQuery);
  }
})(function($) {

  // This yields false
  console.log($ === window.$, $, window.$);

  ("use strict");
  var Slick = window.Slick || {};

the $ in slick is at version 3.2.1, and the global jquery I expose is 1.10.x, so when I use $().slick in my code .slick is not found.

And when using yarn to install the package, no error.

chbdetta on Aug 1, 2017