Laravel Elixir with JQuery and JQuery UI

Question

I'm unable to get JQuery UI required when using Laravel Elixir with Webpack.

Here is my gulpfile.js, nothing unusual:

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

elixir.config.sourcemaps = false;

elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');
});

My app.js file is where I'm trying to require both JQuery and JQuery UI. I've tried multiple things but this is where I'm at:

window.$ = window.jQuery = require('jquery');
window.$ = $.extend(require('jquery-ui'));

No matter what I do, I can't seem to get JQuery UI required and working.

Answer 1

Figured it out. jquery-ui, as is built and in npm doesn't contain a dist file. In order to solve this you have to use a file called jquery-ui-bundle. Run the following command npm i -S jquery-ui-bundle.

Then require it after jquery

require('jquery');
require('jquery-ui-bundle');

Hope this saves someone some time, I spent a few hours figuring that out!

Answer 2

npm install jquery-ui-bundle --save

In your bootstrap.js add this:

window.$ = window.jQuery = require('jquery');
window.$ = $.extend(require('jquery-ui-bundle'));

npm run dev

Answer 3

Three simple steps:

1. Install npm package: npm i -S jquery-ui-bundle

2. Import javascript (somewhere after jquery importing): require('jquery-ui-bundle');

3. Import css styles: node_modules/jquery-ui-bundle/jquery-ui.css