bcwiles's avatar

jQuery UI not loading in Laravel Mix

I have a Laravel 9 project with Laravel Mix. If I try to include the jQuery UI widgets, I get a Javascript error that $(...).draggable is not a function. I've installed jquery and jquery-ui via npm install.

I've tried several ways, including the "right" way according to the jQuery UI docs:

var draggable = require("jquery-ui/ui/widgets/draggable");

If I try the following, I don't get the "draggable is not a function" error, but nothing happens when I call the draggable function on an element:

window.$.fn.draggable = require("jquery-ui/ui/widgets/draggable");

I've tried several combinations of things. I have verified that both jQuery and jQuery UI are only getting loaded once (I had to add jQUery UI to begin with). In jQuery UI 1.13, you have to import each widget manually with the official NPM package.

I appreciate any help someoe can give. This project is a pretty standard Laravel app, so I'm not sure why it's not working. I can't be the only one using jQUery UI with a recent version of Laravel and Laravel Mix. Thanks.

0 likes
3 replies
bcwiles's avatar

Yes, unfortunately, that doesn't work. I'm running Laravel Mix 6.0.41. Those instructions aren't in the latest docs, which makes me think they don't work anymore. I suspect there's a new way to do it with the latest jQuery UI and Laravel Mix together.

I also tried the webpack-jquery-ui NPM module, but that has the same issues.

bcwiles's avatar

I ended up getting it to work the old-fashioned way. I included jquery and jquery-ui via the script tags instead of using Mix, and it worked just fine. I guess I will have to manually update them both, but how often does anyone really do that anyway?

Please or to participate in this conversation.