Laravel mix - Uncaught TypeError: $(...).dialog is not a function

Question

In my project i am using laravel 7 with laravel mix to minify assets. Everything went fine until i needed a jquery-ui on website. Everytime i can't use dialog function - looks like it's somehow not loaded.

My package.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 --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.18.1",
    "bootstrap": "^4.4.1",
    "cross-env": "^5.2.1",
    "jquery": "^3.5.1",
    "laravel-mix": "^4.1.4",
    "lodash": "^4.17.15",
    "popper.js": "^1.16.1",
    "resolve-url-loader": "^2.3.1",
    "vue-template-compiler": "^2.6.11",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "jquery": "^3.5.1",
    "jquery-ui-dist": "^1.12.1",
    "lozad": "^1.14.0",
    "sweetalert2": "^8.19.0"
  }
}

webpack.mix.js

const mix = require('laravel-mix');

mix.config.publicPath = 'public_html';
mix.js([
    'public_html/themes/gamafrontend/source/js/core.js',
    'public_html/themes/gamafrontend/source/js/kitchen-planner.js'
], 'public_html/themes/gamafrontend/dist/js/app.js')
    .version();

So everything was working fine until i needed to call .dialog function used in file called kitchen-planner.js which is compiled to app.js. Function looks like this:

window.showKitchenPlanerDialog = function () {
if ($("#kitchenPlanner").length == 0) {
    $('body').append("");
}

if ($(window).width() > 900) {
    $('#kitchenPlanner').dialog({
        width: $(window).width() * 0.9,
        height: $(window).height() * 0.9,
        modal: true,
        fluid: true
    });
    loadKitchenPlanner();
}

}

I've read that i need to attach function to window to have access to it when compiled via webpack. Previously i had error that function is not defined and attaching it to window solved that problem. So when i call showKitchenPlanerDialog() there is a line calling dialog and it's throwing 'dialog is not defined'.

I have tried to use different package called jquery-ui-bundle - with no luck.

For any ideas and help - many thanks!

Laravel mix - Uncaught TypeError: $(...).dialog is not a function

0 Answers