Laravel. mix не видит jQuery (Uncaught TypeError: $(...)... is not a function)

laravel

Laravel (начиная с версии 5.4) обладает встроенным удобным, гибким и чистым API для сборки webpack.
Данный API работает с использованием нескольких основных препроцессоров. Таких как css и js.
Если вы в своем приложении используете jQuery, то вы могли столкнуться с проблемой того, что ваше приложение не видит jQuery.
И вы скорее всего получаете седеющую ошибку:
Uncaught TypeError: $(...)... is not a function


Решение проблемы с помощью автоматический загрузки модулей:
  • Если вы используете Bootstap < 4.0 версии или вообще не используете, то можно попробовать решить данную проблему следующим образом[/b]:
    В корне вашего проекта есть файл webpack.mix.js. Откройте его и после строки let mix = require('laravel-mix'); добавьте строки:
    mix.autoload({
        jquery: ['$', 'global.jQuery',"jQuery","global.$","jquery","global.jquery"]
    });

    Должно получиться что то вроде этого:
    
    let mix = require('laravel-mix');
    
    mix.autoload({
        jquery: ['$', 'global.jQuery',"jQuery","global.$","jquery","global.jquery"]
    });
    
    mix.js(['resources/assets/js/app.js',
        'node_modules/bootstrap/dist/js/bootstrap.js'],'public/js').sourceMaps()
        .sass('resources/assets/sass/app.scss', 'public/css');

    Сохраните код и перезапустите сборку webpack.

  • Если вы используете bootstrap 4 версии или старше.
    Bootstrap 4 больше не использует определения модулей для основного jаvascript, вместо этого нужно явно указать каждый статический модуль.

    Определение статических модулей:
    mix.webpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                $               : 'jquery',
                jQuery          : 'jquery',
                'window.jQuery' : 'jquery',
                Popper          : ['popper.js', 'default'],
                Alert           : 'exports-loader?Alert!bootstrap/js/dist/alert',
                Button          : 'exports-loader?Button!bootstrap/js/dist/button',
                Carousel        : 'exports-loader?Carousel!bootstrap/js/dist/carousel',
                Collapse        : 'exports-loader?Collapse!bootstrap/js/dist/collapse',
                Dropdown        : 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
                Modal           : 'exports-loader?Modal!bootstrap/js/dist/modal',
                Popover         : 'exports-loader?Popover!bootstrap/js/dist/popover',
                Scrollspy       : 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
                Tab             : 'exports-loader?Tab!bootstrap/js/dist/tab',
                Tooltip         : "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
                Util            : 'exports-loader?Util!bootstrap/js/dist/util',
            }),
        ],
    });
    В теле (webpack.ProvidePlugin({) необходимо перечислить модули для автозагрузки, которые вы используете. Если ваша версия bootstrap < 4 версии или вообще отсутствует, то можно оставить строки, связанные с jQuery. В примере перечислены jQuery, popper.js и bootstrap модули.

    Сохраните код и перезапустите сборку webpack.

После проведения данных манипуляций jQuery должен загружаться автоматически при автозагрузке и проблема с возникновением ошибок должна исчезнуть.
Если вы знаете другое решение и готовы поделиться им с другими людьми, то публикуйте решение в комментарии.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.