CODEWITHSUNDEEP
jqueryjquery-uidatepickergulpbrowserify
Murray Wynnes
Murray Wynnes

Reputation: 303

Browserify loaded with JqueryUI not working

I'm having problems using Browserify to load Jquery-UI.

The node modules for jquery and jquery-ui are loading fine with no issues. Only when I try to require them into a bundle using browserify, and load JqueryUI datepicker I get the following javascript error in the browser:

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

The app.js contains the following:

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

I'm also using gulp and laravel-elixer and my package.json contains:

{
   "private": true,
   "scripts": {
     "production": "gulp --production",
     "dev": "gulp watch",
   },
   "dependencies": {
     "gulp": "^3.9.1",
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "laravel-elixir": "^5.0.0"
   }
}

The gulpfile.js contains:

var elixir = require('laravel-elixir');
elixir(function (mix) {
    mix.sass('app.scss');
    mix.browserify('app.js');
    mix.version(['css/app.css', 'js/app.js']);
});

Is this a bug or I'm doing something wrong? thanks

Upvotes: 2

Views: 1492

Answers (1)

webdev
webdev

Reputation: 56

May be you are using jQuery-UI 1.12. Browserify is incompatible with the new version. The official upgrade page says:

If you're using browserify: The UMD headers we have aren't supported by browserify natively, and the deamdify plugin has a blocking bug. If you depend on that combination, please help fix that bug!

https://jqueryui.com/upgrade-guide/1.12/

I haven't tried it myself but you may be able to make it work by requiring individual widget

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

Upvotes: 4

Related Questions