Laravel Elixir with jQuery and jQuery UI

Question

I cannot get the jQuery user interface needed 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 try to use both jQuery and jQuery. I tried a few things, but this is where I am:

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

No matter what I do, I cannot get the jQuery UI to work and work.

Answer 1

Figured it out. jquery-ui, as built, and in npm does not contain a dist file. To solve this problem, you should use a file called jquery-ui-bundle . Run the following npm i -S jquery-ui-bundle command.

Then require it after jquery

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

Hope this helps someone, I spent several hours figuring it 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 easy steps:

• Install npm package: npm i -S jquery-ui-bundle

• Javascript import (somewhere after jquery import): require('jquery-ui-bundle');

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