use jquery-ui with webpack?

bump... anyone?

Hi,

This is what I have done in Elixir

elixir(mix => {
    mix.sass('app.scss')
    .webpack('app.js')
    .copy('node_modules/bootstrap-              sass/assets/fonts/bootstrap/','public/fonts/bootstrap')
    .copy('resources/assets/css/','public/css/jqueryui')
    .copy('resources/assets/js/schedule/','public/js')
    .copy('resources/assets/DataTables/', 'public/DataTables')
    // .copy('resources/assets/js/helpers/','public/js/helpers')
    });

I just copied the JS file I wanted to use.

Also, have you tried dropping the .js from

 require('jquery-ui-dist/jquery-ui.js');

@kieranjfahy i tried it without the .js and same error. i'm really considering going back to elixir or just use plain gulp. i'm not a big front end guy and my requirements are low. i just need the preprocessor part. i've spent so much time trying to get this to work. kinda bummed i can't but i have to move forward.

i want to use webpack since this is becoming more focused as a feature in laravel but i'm worried that this framework's focus will continue to grow on front end and less back end... i hope not.

@w1n78 If you want to have anything available globaly, use mix.autoload(). It takes an object with something like jquery: ['$', 'window.jQuery']. You can also use ES2015 import with webpack 2.2. In other words, if the file does not export a module then use import './the_file';. If it has an export, import theFile from './the_file'; Webpack will sort it out.

Also, have you noticed the Mix docs on github?

@ejdelmonico thanks, you've been responding to my recent front end posts and i appreciate yours and everyone's patience. i have been on those docs for a few hours yesterday. i saw the autoload thing and tried it but still same error. i just need to have jqueryui available, can't find any clear examples on how to bring it in. i even used it in mix.js('node_modules...blah.../jqueryui', 'destination') and same error. then in blade brought it in after app.js. same error.

here's my webpack.mix.js

mix.autoload({
    jquery: ['$', 'window.jQuery']
    })
    .js('resources/assets/js/app.js', 'js/app.js')
    .sass('resources/assets/sass/app.scss', 'css/app.css');

@w1n78 I will take a stab at it in a bit. Webpack is not that hard. It's just that after figuring out how to do it in Webpack (and with what plugins), you have to look at the Mix code to see how to do it.

So, it's the full jQuery-UI or just the JS portion you are trying to use?

@ejdelmonico i am trying to use jquery-ui-dist. i need the js and the default css. thanks.

@w1n78 I can't seem to locate bundle or dist, are they custom downloads?

@ejdelmonico here's my package.json

"jquery-ui-dist": "^1.12.1",
    "jquery-ui-bundle": "^1.11.4"

don't need both i just tried both coz i couldn't get it to work. normally, i use jquery-ui-dist.

@w1n78 So, to get webpack to take jquery-ui, you must use the jquery-ui-dist package. In bootstrap.js and after bootstarp-sass write require('jquery-ui');. In webpack.mix.js, you need to place an alias to attach to the default webpack config like this:

mix.webpackConfig({
    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    }
});

Place that before you call mix.js(). It will be bundled by webpack.

@ejdelmonico still the same error.

here's bootstrap.js

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

mix.webpackConfig({
    output: {
        path: __dirname + "/public/assets"
    },
    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    }
});

mix.autoload({
    jquery: ['$', 'window.jQuery']
    })
    .js('resources/assets/js/app.js', 'js/app.js')
    .sass('resources/assets/sass/app.scss', 'css/app.css');

here's bootstrap.js

window.$ = window.jQuery = require('jquery');

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

now i also noticed my bootstrap js stuff doesn't work when i use the .autoload(). but when i remove it, bootstrap js stuff works. either way, jquery-ui doesn't work. i've also removed the node_modules directory and started over with npm install. i'm on a mac, not windows.

@w1n78 jQuery is already included with Mix so you can scrap your autoload. Is your output path working correctly because it doesn't look correct to me?

I was able to get everything working with a jquery ui calendar by doing what I wrote. The alias is key and you have to use jquery-ui-dist. To bring up the calendar, I used this in app.js:

$(function() {
    "use strict";
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true
    });
});

@ejdelmonico the output path works. i view source on the web page and click on the app.js to load it and it's there. if it's wrong, wouldn't all my javascript stuff won't work? bootstrap js works fine.

i tried your code above and on top of the error i've been getting, i now get this...

jQuery.Deferred exception: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function

looks like the same error.

I am not sure what you have going on. I tested on a fresh Laravel 5.4 install and the alias works because you can find the library in your webpack processed file. If it is not present, make sure you are using it otherwise webpack will ignore the required library through tree shaking.

Also, if you have jQuery library in there twice, you could get various errors. As I stated before, jquery is already pulled in by webpack so you can remove any other code that tries to pull in a copy like that mix.autoload().

@ejdelmonico i removed the output path code so that it creates the output files in /public/js and /public/css rather than /public/assets. so it should now have "default" mix code aside from the jquery-ui stuff and still same error.

what's baffling is the bootstrap javascript works as expected, which means jquery is loading correctly because it needs that.

jquery-ui is the only one not working. i open app.js and searched for "jqueryui" and "datepicker", it's there.

i'll create an empty laravel project and use your code. if it works, then i'll slowly move my php stuff over (i hope i don't have to always do that). but this is crazy that front end stuff is stopping my progress. if i can't get it to work, i'll just go back to elixir or gulp. but webpack is so much faster haha.

@ejdelmonico i give up haha. i went back to elixir. used the same packages and use gulp and guess what... it works. i even used webpack for app.js. similar to the code you shared before.

i don't know why i'm having so much issues with mix().

thank you and thank you @kieranjfahy for your time and patience.

I've been following this thread because I'm having the exact same issue but in a slightly different environment -- a fresh Laravel/Spark install.

@ejdelmonico in your example, are you finding the new jquery-ui code mix'd into your app.js file? My webpack.mix and bootstrap is exactly like yours, but the requre is not pulling the aliased 'jquery-ui-bundle' into app.js.

I should have spent just a few more minutes investigating before my last post but maybe this will help someone else. In my case, I'm using Spark so the webpack/bootstrap process is slightly different. With the Spark webpack config, I had to add the require to app.js, not bootstrap.js as follows

require('spark-bootstrap');

require('./components/bootstrap');


require('../../../node_modules/jquery-ui-bundle/jquery-ui.min.js');


var app = new Vue({
    mixins: [require('spark')]
});

Hope this helps! Now jqueryui is available globally in app.js. I had been mixing in jquery-ui into a separate js file which was not exposing my additional jquery modules to be globally available.

@gstoa I will name my firstborn after you.

Just want to confirm that the method of @ejdelmonico is working!

I was having the same issue and then I tried to revert. That did not work either. I found out that the homestead / vagrant box was messing up the npm manager (or at least the JavaScript).

I restarted Homestead and the solution from @ejdelmonico worked.

Using Laravel 5.5.