Slick-carousel and webpack - $(...).slick is not a function. The solution from other issues doesn't work.

Hello. I’m trying to use slick-carousel and webpack.

I use the solutions from #2290 with ProvidePlupin and esplose-loader. jQuery and Webpack work without error. But still got the error “$(…).slick is not a function”.

Maybe the reason is in the package version in npm? In this repo last version is 1.8.0. In npmjs.com - 1.7.1 (link)

Or I missed a working solution? What kind?

Script code

import $ from 'jquery';
import 'slick-carousel';
$(".slider-wrapper").slick();

Dependencies

  "devDependencies": {
    ...
    "webpack": "^2.7.0",
    "webpack-stream": "^4.0.0",
  },
  "dependencies": {
    ...
    "jquery": "2.2.4",
    "slick-carousel": "1.7.1",
  }

Webpack config

const path        = require('path'); //npm module for absolute path like  path.resolve(__dirname, './build')
const webpack = require('webpack');
const config     = require('./gulp/config.js');


module.exports = {
    entry: './'+ config.src.jsEntryPoint,   
    output: {
        filename: 'bundle.js', 
        path: path.resolve(__dirname, './' + config.dest.js),   
    },
    watch: true, //live-reloading
    devtool: 'source-map', 


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



    module: {
        loaders: [
			{
			  test: require.resolve("jquery"),
			  use: [
				{
				  loader: "expose-loader",
				  options: "$"
				}
			  ]
			}        
		],
    }

};

[warslett]

there is a special place in hell for people who close github issues like this…

[Gesparo]

This solution helped me to solve the problem:

import $ from 'jquery';
window.$ = window.jQuery = $;
import 'slick-carousel'