@Albert1991

Как правильно подключать jquery плагины в Laravel через Laravel Mix?

Подскажите как правильно подключать jquery библиотеки в Laravel через Laravel Mix.

На данный момент в webpack.min.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .extract(['jquery', 'bootstrap', 'owl.carousel'])
    .autoload({
        jquery: ['$', 'global.jQuery',"jQuery","global.$","jquery","global.jquery"]
    })
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/libs.scss', 'public/css/vendor.css')
    .styles(['resources/css/main.css'], 'public/css/main.min.css')

if (mix.inProduction()) {
    mix.version();
}


В packaje.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.5.2",
        "cross-env": "^7.0",
        "jquery": "^3.5.1",
        "popper.js": "1.16.1",
        "laravel-mix": "^5.0.5",
        "lodash": "^4.17.20",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "owl.carousel": "^2.3.4"
    }
}


В итоге ошибка
Uncaught TypeError: $(...).owlCarousel is not a function
at HTMLDocument. (app.js:2768)
at mightThrow (vendor.js:8191)
at process (vendor.js:8259)

Подскажите, пожалуйста, как это реализовать правильно.
  • Вопрос задан
  • 463 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы