Страницы

Поиск по вопросам

среда, 25 декабря 2019 г.

Не удается подключить Slick slider используя Webpack. Ошибка $(…).slick is not a function

#jquery #webpack #slickjs


Пробую подключить к проекту slick через webpack по примеру репозитария автора.  В
этом репозитории слайдер срабатывает.В моем проекте не заводиться, хотя вроде подключается
почти так же (отличие - в проекте используется gulp, webpack подключается через него). 
В чем может быть ошибка? Что стоит попробовать?

Репозиторий от автора слайдера с работающим примером
ссылка

Симптомы проблемы

jQuery скрипты без использования плагинов срабатывают корректно.
При подключении 'slick-carousel' выдает:

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


или (если подключить jquery в webpack глобально через ProvidePlugin)

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


Код app.js

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


Версии установленных зависимостей

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


Конфиг 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: "$"
                    }
                ]
            }
        ]
    },
};


Конфиг подключения Webpack к 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));
});

    


Ответы

Ответ 1



Коллеги, проблема решена. Проблема была в конфликте зависимостей. Ее решило удаление lock-файла и установка node_modules заново.

Комментариев нет:

Отправить комментарий