Unable to load jQuery plugins when using requirejs & r.js optimizer

I have problems with my requirejs optimizer. After starting the optimizer, I get several error messages in the assembly / compilation file. When starting my web application without an optimization step, I have no errors.

This is my client.js file (contains config) (coffeescript)

requirejs.config baseUrl: '/source/' paths: text: 'lib/text' io: 'lib/socket.io' underscore: 'lib/underscore' backbone: 'lib/backbone' jquery: 'lib/jquery' # almond: 'lib/almond' bootstrap: 'lib/bootstrap' bootstrapFileUpload: 'lib/bootstrap-fileupload' jqueryUniform: 'lib/jquery.uniform' jqueryBrowser: 'lib/jquery.browser' datatables: 'lib/jquery.dataTables' datatables_bootstrap: 'lib/DT_bootstrap' shim: io: exports: 'io' jquery: exports: 'jQuery' jqueryBrowser: deps: ['jquery'] jqueryUniform: deps: ['jqueryBrowser', 'jquery'] underscore: exports: '_' backbone: deps: ['underscore', 'jquery'] exports: 'Backbone' datatables_bootstrap: deps: ['jquery', 'datatables'] datatables: deps: ['jquery'] require ['routers/router', 'backbone'], (Router, Backbone) -> MainRouter = new Router() Backbone.history.start() 

And here is my configuration for the optimizer. I run the optimizer from nodejs after requesting "requirejs" as a module.

  config = baseUrl: __dirname + '/../client/source' name: 'lib/almond' include: './client' optimize: 'none' out: __dirname + '/../client/' + hash + '.js' paths: text: 'lib/text' io: 'lib/socket.io' underscore: 'lib/underscore' backbone: 'lib/backbone' jquery: 'lib/jquery' bootstrap: 'lib/bootstrap' bootstrapFileUpload: 'lib/bootstrap-fileupload' jqueryUniform: 'lib/jquery.uniform' jqueryBrowser: 'lib/jquery.browser' datatables: 'lib/jquery.dataTables' datatables_bootstrap: 'lib/DT_bootstrap' shim: bootstrap: exports: 'bootstrap' bootstrapFileUpload: exports: 'bootstrapUpload' io: exports: 'io' jquery: exports: 'jQuery' jqueryBrowser: deps: ['jquery'] jqueryUniform: deps: ['jqueryBrowser', 'jquery'] underscore: exports: '_' backbone: deps: ['underscore', 'jquery'] exports: 'Backbone' datatables: deps: ['jquery'] datatables_bootstrap: deps: ['jquery', 'datatables'] requirejs.optimize config, (buildResponse) -> js = true if js && css require './server' , (err) -> console.log 'requirejs err' console.log err 

The specific error that I see in chrome is: "Uncaught TypeError: Unable to read 'defaults' properties from undefined"

What correlates with this fragment:

 /* Set the defaults for DataTables initialisation */ $.extend( true, $.fn.dataTable.defaults, { 

Any idea what could go wrong? Thanks!

+7
source share
3 answers

I ran into the same problem. I think the reason this error occurs is because DT_bootstrap.js not an AMD module, but depends on side effects. In this case, jquery.dataTables.js .

When RequireJS optimizer combines all the modules you reference into one large JS file, raw DT_bootstrap.js is somewhere in the middle, at some place after jquery.dataTables.js . The problem is that DT_bootstrap.js is evaluated immediately after loading your js file. He wants $.fn.dataTable be determined when he encounters a string:

 $.extend( true, $.fn.dataTable.defaults, { 

Since jquery.dataTables.js is an AMD module, it has been compiled but not yet evaluated. Only in later code, where it is required as a dependency, will it be evaluated, and only after that will it define $.fn.dataTable .

I worked on this by wrapping "DT_bootstrap.js" in the AMD module definition, as is done here: https://github.com/amdjs/backbone/blob/master/backbone.js#L8-L24

For example:

 (function(root, factory) { // Set up DT_bootstrap appropriately for the environment. if (typeof define === 'function' && define.amd) { // AMD define(['jquery', 'datatables', 'bootstrap'], function($) { factory($); }); } else { // Browser globals factory(root.jQuery); } }(this, function($) { // <--- original DT_bootstrap.js goes here })); 

He solved the problem for me.

+14
source
Peter is almost right. The only thing he missed was that the definitions should match Casey's configuration. Therefore, in the answer above, instead of:
 define(['jquery', 'dataTable', 'bootstrap'], function($) ... 

it should be:

 define(['jquery', 'datatables', 'bootstrap'], function($) ... 

Otherwise, js will look for the dataTable.js file, not the one it needs to get.

0
source

Since the 2.1rap parameter wrapShim is required to handle this problem, so you can save the original source file.

0
source

All Articles