jquery – Can't connect Slick slider using Webpack. Error $(…).slick is not a function

Question:

I'm trying to connect to the slick project via webpack, following the example of the author's repository.
In this repository, the slider fires.
It doesn’t start in my project, although it seems to be connected in almost the same way (the difference is that the project uses gulp, webpack connects through it).
What could be wrong? What is worth a try?

Repository from the author of the slider with a working example
link

Problem symptoms

jQuery scripts without using plugins work correctly.
When connected, 'slick-carousel' produces:

Uncaught TypeError: (0 , _jquery2.default)(...).slick is not a function

or (if you include jquery in webpack globally via ProvidePlugin)

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

Code app.js

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

Versions of Installed Dependencies

  "devDependencies": {
    "webpack": "3.4.1",
    "webpack-stream": "^4.0.0",
  },
  "dependencies": {
    "jquery": "1.11.1",
    "slick-carousel": "1.6.0"
  }

Config webpack

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


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

    module: {
        rules: [
            {
                test: /\.js?$/,
                loader: "babel-loader"
            },
            {
                test: require.resolve("jquery"),
                use: [
                    {
                        loader: "expose-loader",
                        options: "jQuery"
                    },
                    {
                        loader: "expose-loader",
                        options: "$"
                    }
                ]
            }
        ]
    },
};

Config connecting Webpack to Gulp

const gulp          = require('gulp');  
const webpackStream = require('webpack-stream');
const webpack       = require('webpack');
const config        = require('../config.js');

gulp.task('js-webpack', function() {
    gulp.src(config.src.jsEntryPoint) 
        .pipe(  webpackStream( require('../../webpack.config.js'), webpack ))
        .pipe(gulp.dest(config.dest.js));
});

Answer:

Colleagues, the problem is solved. The problem was a dependency conflict. It was solved by deleting the lock file and installing node_modules again.

Scroll to Top