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.

Jake Sylvestre · Accepted Answer · 2016-12-10 21:15:54Z

7

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!

answered Dec 10, 2016 at 21:15

Jake Sylvestre

9433 gold badges14 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jake Sylvestre Over a year ago

@JagadeshaNH are you using elixir for that too?

Rabb-bit Over a year ago

where do you put the require??

Jake Sylvestre Over a year ago

@Rabb-bit to import the modules

foob.ar Over a year ago

Thanks @JakeSylvestre. This saved me a lot of time!!

STWilson · Accepted Answer · 2017-06-24 18:29:33Z

3

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

answered Jun 24, 2017 at 18:29

STWilson

1,7382 gold badges17 silver badges26 bronze badges

Comments

jkgh · Accepted Answer · 2017-05-13 13:00:26Z

1

Three simple steps:

Install npm package: npm i -S jquery-ui-bundle
Import javascript (somewhere after jquery importing): require('jquery-ui-bundle');
Import css styles: node_modules/jquery-ui-bundle/jquery-ui.css

answered May 13, 2017 at 13:00

jkgh

415 bronze badges

Collectives™ on Stack Overflow

Laravel Elixir with JQuery and JQuery UI

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related