Requirejs + jqueryui = $ .widget not defined

Question

I am using requirejs + jquery + jqueryui. I read TONS examples of how to do this. I think I understand the different approaches, and it seems to me that my setup should work correctly. However, I sometimes get $. The widget does not detect an error in my custom modules depending on jquery-ui. This is pain because it is inconsistent and difficult to reproduce, so it is difficult for me to test alternative approaches.

I do not smooth out all my jquery plugins, because there are a lot of them. Instead, I load jquery with a separate call to requirejs. Then, in the callback, I download the rest of my stuff. This way, I don't need to maintain a list of pads for all my jquery plugins.

For jquery-ui, I use a padding so that it depends on jquery. Then all my custom modules that use the factory widget have jquery-ui in the dependency list.

In my templates ...

requirejs.config({ baseUrl: ATHLETE.siteConfig.jsBaseUrl, paths: { 'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', 'jquery-ui': '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min' }, shim: { "jquery-ui": ['jquery'] }, waitSeconds: 15 }); requirejs(['jquery'], function($) { requirejs(['site'], function() { requirejs(['mypage']); }); }); 

Please note that I am loading site.js before mypage.js. They have common dependencies. In my build configuration, I exclude site.js from mypage.js, so common dependencies are compiled into site.js, not mypage.js. Therefore, I need to fully download site.js before downloading mypage.js, otherwise you may need to download these general dependencies separately.

Here is an example of a custom module that depends on jquery-ui.

 define([ 'jquery', 'jquery-ui' ],function($) { $.widget('ui.viewAllSponsorsWidget', $.ui.dialog, { options: { autoOpen: false, dialogClass: 'view-all-sponsor-dialog-wrap', draggable: false, modal: true, resizable: false, width: 370, height: 400 } }); }); 

The $ .widget error is undefined, caused by the 5th line of this and similar custom modules. Again, this is really inconsistent and difficult to reproduce. More often than not, I DO NOT get an error even when I clear my cache. Can anyone think that line 5 can be executed before jquery-ui is fully loaded?

UPDATE August 16, 2013

I was able to track this a bit more. I created a simple module that depends on jquery and jquery-ui.

 define([ 'jquery', 'jquery-ui' ],function($) { console.log('$.widget is defined? ' + Boolean($.widget)); console.log('jQuery.widget is defined? ' + Boolean(jQuery.widget)); }); 

The result of this is as follows:

 LOG: $.widget is defined? false LOG: jQuery.widget is defined? true 

So, somehow the global jQuery object has a widget, but the copy provided to me by requirejs does not.

Answer 1

These answers are a bit outdated. Hope to offer some updated answer. The jQuery user interface now comes with AMD built-in support. You can just get it with

 bower install jquery-ui 

and then in requirejs.config just add jquery_ui to the path section {}. No gasket is required anymore.

If you want to download only the small jquery-ui subsection that you need, install bower install jquery-ui and then use the build tool that requirejs provides to create the package. Otherwise, if you only try to import one separate file, each jquery-ui file will try to load their dependencies, and you will get things like “widget not defined” or “cannot find widget.js file”, etc. I quickly wrote here: https://hendrixski.wordpress.com/2015/04/17/adding-only-the-parts-of-jquery-ui-that-you-need-into-your-requirejs-project/

Hope this helps.

Answer 2

there was a similar problem since ASP.NET controls were part of the third part, capturing jQuery define.

$ telerik. $ = jQuery.noConflict ();

Despite being a cleared script, the tail of the jQuery script effectively replaced my RequireJS mapping

if (typeof define === "function" && define.amd) {define ("jquery", [], function () {return jQuery;}); }

RequireJS delays the loading of scripts, and RadScriptManager will continue to enter scripts under the form tag to highlight strange race problems.

For some requests, $ was from my card and was global. Other $ requests were $ Telerik. $ And were not global, but another version

To solve the problem, I returned to the jQuery version that Telerik controls were used and hard-coded it in the scrip tag to ensure that it was always available, and then disconnected Telerik from loading my own jQuery. Not AMD, but works pretty well for me.

Answer 3

Change the setting:

 shim: { 'jquery-ui': ['jquery'] } 

The following is an example from the Require.js configuration for popular libraries.

Answer 4

I think I have a solution to my problem. Although, since this problem is difficult to reproduce, I am going to wait a while before "accepting" my own answer as it is right. Also, my answer does not load jquery using requirejs. I see no reason why this matters to me. But if anyone sees a way to accomplish this without having to load jquery into a separate script tag, let me know.

Since jQuery defines itself as a named AMD module, I can simply load it synchronously first using the standard script tag before I make any requirejs stuff. Then I also delete the path entry for jquery, as it is already loading under the name "jquery" at this point. By doing this, requirejs returns me the correct "copy" of jQuery, and everything works. I also need to use jQuery.noConflict, because I use Garmin Communicator, which depends on Prototype. So, here is my updated code, omitting the irrelevant parts.

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript">$.noConflict();</script> <script type="text/javascript"> requirejs.config({ baseUrl: ATHLETE.siteConfig.jsBaseUrl, paths: { 'jquery-ui': '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min' }, shim: { "jquery-ui": ['jquery'] }, waitSeconds: 15 }); requirejs(['mymodule']); </script> 

And my modules can still depend on jquery and jquery-ui, as usual:

 define([ 'jquery', 'jquery-ui' ],function($) { $.widget('ui.mycoolwidget', ...); }); 

Answer 5

if you want to override any jQuery-ui method, it is best to use the Initjs init method, this ensures that every module that includes jQuery-ui uses the same modified code.

use your shim like this

  'jquery-ui': { deps: ['jQuery'], init: function ($) { //do whatever with $.widget , all reference of // jQuery-ui is accessible here, override return this; //very imp , so all your module will use your // modified jQuery-UI reference } }, 

Answer 6

I came across a similar, very random error when using jQuery UI with Require.js, which I fixed with a jqueryui-amd script conversion to create "AMD wrapped modules" for the jQuery user interface for use in boot loaders such as RequireJS. "

• Install using npm.

   npm install -g jqueryui-amd 

• Convert jQuery JavaScript UI files downloaded from jqueryui.com

   jqueryui-amd path/to/jquery-ui-version 

• Then add the path to the new converted jqueryui directory to the require.js configuration file.

   requirejs.config({ paths: { jqueryui: 'path/to/jquery-ui-version/jqueryui' } }); 

• Finally, in your JavaScript file, where you use one of the components of the jQuery interface.

   define(['jquery', 'jqueryui/widget', 'jqueryui/button'], function ($) { //Use widget and button in here, off of the given $ variable. }); 

Answer 7

I had the same problem as you, defining my widgets in RequireJS modules, and although I am not 100% sure, this is the best solution, it worked for me without violating the integrity of the modules:

 requirejs.config({ //By default load any module IDs from js/lib baseUrl: 'js', shim: { 'jquery': { exports: 'jQuery' }, 'jquery-ui': { deps: ['jquery'], exports: '$' } } }); 

When you need jquery-ui in your module, jQuery will be automatically requested and the $ object will have everything you need.