Webpack + Vue.js + jQuery Plugin: Почему «is not a function»?

Question

[Арсений Соколов]

Есть такая библиотека: https://github.com/hernansartorio/jquery-nice-select

Я её подключаю в файле bootstrap.js вот так:

require('jquery-nice-select');

Потом пытаюсь использовать уже в приложении в файле app.js:

require('./bootstrap');
// .. код с настройками Vue
const app = new Vue({
    router,
    components: {
      App
    },
    template: '<app></app>',
    mounted() {
        $('select').niceSelect();
    }
}).$mount('#app');

Конфиг для сборки проекта webpack.mix.js используется для Laravel следующий:

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/vendors.scss', 'public/css')
    .sass('resources/assets/sass/style.scss', 'public/css')
    .extract(
        [
            'vue',
            'vue-resource',
            'vue-router',
            'vue-scrollto',
            'vue-meta'
        ],
        'public/js/vue.js'
    )
    .extract(
        [
            'jquery',
            'bootstrap-sass',
            'jquery-nice-select',
            'owl.carousel',
            'jquery-parallax.js',
        ],
        'public/js/vendor.js'
    )
    .autoload({
        'jquery': ['$', 'jquery', 'jQuery', 'window.jQuery'],
        'tether': ['window.Tether', 'Tether'],
    })
;

Однако при попытке использовать плагин niceSelect возникает следующая ошибка:

vue.js:484 [Vue warn]: Error in mounted hook: "TypeError: $(...).niceSelect is not a function"

и

TypeError: $(...).niceSelect is not a function

Я не понимаю куда смотреть и что я делаю не правильно? У меня такая проблема возникла только с данными плагином, ранее все всегда подключалось и работало правильно.

P.S. Заметьте, ошибка не о том что функция не объявлена, а о том что это не функция. И да подключение всех JS в публичной части делается нормально:

<!-- код -->
<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/vue.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>

UPD:
Кстати в директивах такая же ошибка выводиться.

Answer 1

[Никита Траторов]

Я предложил бы вынести jQuery в js:

global.jquery = global.jQuery = global.$ = require('jquery');

Answer 2

[lavezzi1]

Есть такая библиотека: https://github.com/sagalbot/vue-select

Comments

[Арсений Соколов]

Там такой вариант не подходит, в сверстанном шаблоне нужно именно эту фигню использовать, ну или что-то подобное, что можно было бы легко сделать подобной хренью, без поиска, без всяких строк и т.п.