I'm using requirejs to load some libraries and dependencies.
When I just load jQuery, it's working perfectly:
main.js
require.config({
shim: {
jquery: {
exports: '$'
}
},
paths: {
jquery: 'vendor/jquery'
}
});
require([
'vendor/jquery',
'app/init'
]);
app/init.js
define(
['jquery'],
function ($) {
$(document).ready(function () {
console.log('domready');
})
}
)
But when I try to add underscore, in the network panel the file is correctly loaded but in the console I get a
Uncaught Error: Load timeout for modules: underscore
What's happening? I also tried the waitSeconds: 200 options inside the require.config without any success.
Below the final (broken) code as a reference:
main.js
require.config({
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
}
},
paths: {
jquery: 'vendor/jquery',
underscore: 'vendor/underscore',
}
})
require([
'vendor/jquery',
'vendor/underscore',
'app/init'
])
app/init.js
define(
['jquery', 'underscore'],
function ($, _) {
$(document).ready(function () {
console.log('domready');
})
}
)
To fix the problem, you must update your JavaScript define methods within RequireJS, according to following documentation: https://requirejs.org/docs/api.html#define.
shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value. Here is an example. It requires RequireJS 2.1. 0+, and assumes backbone. js, underscore.
RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programmingmodular programmingModular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.https://en.wikipedia.org › wiki › Modular_programmingModular programming - Wikipedia. It also helps to improve the speed and quality of the code.
It is used by RequireJS to know which module to load in your application. For instance − <script data-main = "scripts/main" src = "scripts/require.js"></script> To include the Require. js file, you need to add the script tag in the html file. Within the script tag, add the data-main attribute to load the module.
In define
and require
calls you sometimes refer to your modules as "vendor/<name of module>"
and sometimes as "<name of module>"
. This is wrong. Based on the config you show you should refer to your modules as "<name of module>"
in all require
and define
calls. So always refer to jQuery and Underscore as "jquery"
and "underscore"
, not "vendor/...
. When you refer to them with the full path you bypass the shim
configuration.
Actually, you can change your require
call to:
require(['app/init']);
You don't need to refer to jQuery and Underscore there. They will be loaded when app/init.js
is loaded due to the define
there requiring them.
(Also, relatively recent versions of jQuery don't need a shim because jQuery detects that it is loaded by an AMD-compatible loader and calls define
itself. This is not the source of your problem but it is good to know.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With