Laravel. mix не видит jQuery (Uncaught TypeError: $(...)... is not a function)
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 должен загружаться автоматически при автозагрузке и проблема с возникновением ошибок должна исчезнуть.
Если вы знаете другое решение и готовы поделиться им с другими людьми, то публикуйте решение в комментарии.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.