I am getting an error:
"Error: Load timeout for modules"
While trying to include a module with dependencies.
Am I doing this incorrectly?
My bootstrap:
requirejs.config({
baseUrl: "js",
paths: {
JqueryUiLatest: "jquery-ui-1.10.1.custom",
}
});
require([
'modules/outlookPopupModule'
], function(OutlookPopupModule){
...
});
My module:
define([
'jquery',
"JqueryUiLatest"
], function ($, JqueryUI) {
it seems to work if I replace "JqueryUiLatest" with the actual file "jquery-ui-1.10.1.custom" in the module, but this seems to defeat the purpose of being able to use the config.
I'm sure I'm doing something wrong here?
By my experience requirejs often fails with timeout when shim dependency module is a plain JS script, not wrapped AMD module. The only solution I have now - load such files manually prior to requirejs or load them explicitly in require/define calls by full name (including .js extensions). In require/define no timeout occurs.
Related
Have require js working fine without the bundles. But whenever i use a bundle, i get timeouts for the modules i am trying to import.
Here is how i build the bundles with the asp.net mvc bundler/minifier
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/jquery-{version}.js",
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
bundles.EnableOptimizations = true;
Heres is the require js config in the cshtml file:
<script>
require.config({
baseUrl: "/scripts",
paths: {
jquery: "jquery-1.11.2"
},
waitSeconds: 20,
shim: {
bootstrap: {
deps: ['jquery']
}
},
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'jquery',
'bootstrap',
'moment'
]
}
});
require(["app/main/test"]);
</script>
And the js for the page (app/main/test):
require(['jquery', 'moment'], function ($, moment) {
console.log(moment().format());
});
Jquery, bootstrap and moment libraries are in the test bundle i have created, but i get load timeouts loading the page for moment.
Here's the chrome inspector error:
Any ideas?
thanks in advance.
This is happening because you are not requiring your bundle at all. Your require call has only jquery and moment. You have provided jquery file path, so requirejs uses that path to download and provide jquery module. But since there is no path definition for moment, it is only part of the bundle that you have created. So requirejs tries downloading moment by its module name as path and thus throws an error.
A simple fix for this is to require bundle itself.
require(['#Scripts.Url("~/bundles/test").ToString()'], function(bundle){
//At this point jquery, moment and bootstrap will be loaded.
});
You can choose to use jQuery, moment from global namespace in above example directly or you can try requiring them seperately in below example. I am not sure, but you may get into error with below example because of cyclic dependency.
require(['#Scripts.Url("~/bundles/test").ToString()', 'jquery', 'moment'], function(bundle, $, moment){
//At this point jquery, moment and bootstrap will be loaded.
});
Just remove 'jquery' from your bundles
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
...
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'bootstrap',
'moment'
]
}
...
You already have it specified in the paths
paths: {
jquery: "jquery-1.11.2"
},
It seems require.js maps the modules to bundles so that once a module that is part of a bundle is loaded, that bundle is not loaded again.
I'm trying to require the bootstrap-webpack module in my webpacked application.
It appears to need jQuery, since the bundled javascript then throws the following:
Uncaught ReferenceError: jQuery is not defined
How do I go about specifying to webpack that jQuery is a dependency for the bootstrap-webpack module, to fix this issue? It feels like it should be trivial, but I've been struggling to figure it out.
I've tried adding:
"jquery": "latest"
to the dependecies in the bootstrap-webpack's package.json, but this didn't work. The documentation is incomplete, and I can't seem to find much about this issue. It should be trivial, right? Help!
There are two possible solutions:
Use the ProvidePlugin: It scans the source code for the given identifier and replaces it with a reference to the given module, just like it has been required.
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Use the imports-loader: It provides the possibility to prepend preparations like require() statements.
// webpack.config.js
{
...
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "imports?jQuery=jquery" }
]
}
}
In that case you need to run npm install imports-loader --save before.
Via this github issue.
Install expose-loader and add require('expose?$!expose?jQuery!jquery'); to your main entry point just before you require webpack-bootstrap.
This will set jQuery on the window so any file can get at it. Be careful with this method all files will then have access to that version of jQuery regardless of whether it was explicitly required.
In my application, I want to have an environment config that uses a different version name for every deploy so that the application is properly cache busted and users don't have stale versions of code in their browser cache. Note I have been following this guide.
Thus, in main.js, before I do anything, I call require.config with a generic config that uses the current date/time to bust the cache on the environment config file, then after the environment config is loaded, I use the environment "config.version" as part of the urlArgs to guarantee that the newly deployed code is included and not a stale version. Note that the object from the config file has other properties that will be used throughout the application as well (e.g. google analytics account number).
It seems that my r.js build file is fine if I remove the first require.config that allows me to setup the environment/config dependency, but when I add it back in, the infrastructure JS module that I'm using to group third-party scripts chokes saying it can't find my underscore lib (or any lib I include in there for that matter). Note that even if I don't include environment/config and just make the two require.config calls, the same error results. Is there a reason two require.config calls would cause this error? Thanks for any help.
//Error:
Error: ENOENT, no such file or directory '<%root_folder%>\dist\js\underscore.js'
In module tree:
infrastructure
My main JS file
//main.js
require.config({
baseUrl: "js",
waitSeconds: 0,
urlArgs: "bustCache=" + (new Date).getTime()
});
require(["environment/config"], function(config) {
"use strict";
require.config({
urlArgs: "bustCache=" + config.version,
baseUrl: "js",
waitSeconds: 0,
paths: {
underscore: "lib/lodash.underscore-2.4.1-min",
},
shim: {
"underscore":{
exports : "_"
}
}
});
//commented out, b/c not needed to produce the error
//require(["jquery", "infrastructure"], function($) {
//$(function() {
//require(["app/main"], function(app) {
//app.initialize();
//})
//});
//});
});
And here's the build file...
//build file
({
mainConfigFile : "js/main.js",
appDir: "./",
baseUrl: "js",
removeCombined: true,
findNestedDependencies: true,
dir: "dist",
optimizeCss: "standard",
modules: [
{
name: "main",
exclude: [
"infrastructure"
]
},
{
name: "infrastructure"
}
],
paths: {
"cdn-jquery": "empty:",
"jquery":"empty:",
"bootstrap.min": "empty:"
}
})
Here infrastructure.js
define(["underscore"], function(){});
config file (will have more keys like google analytics account number and other environment specific info.)
//config.js
define({version:"VERSION-XXXX", cdn: { jquery: "//path-to-jquery-1.11.0.min" }});
command I'm running: "r.js -o build.js"
Ok, yes, it is a problem with the two require.config calls. At runtime, there is absolutely no problem calling config multiple times. However, at build time, r.js is not able to follow the calls. So if your build depends on any later call to require.config you are going to have problems.
I see that your second call to require.config does not contain any value that is computed on the basis of what is loaded after the first call, except for urlArgs so you could move everything from that second call into the first one, except for urlArgs.
I know we could use requirejs combine files into one js file.
such like the following config.
module.exports = {
baseUrl: 'js/',
mainConfigFile: 'src/js/common.js',
dir: 'scripts/',
optimize: 'uglify2',
modules: [
{
name: 'common',
include: [
'jquery',
]
}
]
};
my result into one file is
common.js
----------------
jquery.js
modernizr.js
common.js
my question is, do we still need to put a require.js file in scripts folder and to use the following format
<script data-main="scripts/common" src="scripts/require.js"></script>
or we could just use
<script src="scripts/common.js"></script>
as files are compressed into one file?
You still need to load require.js the usual way to actually make use of the module loading benefits that it provides, and especially if you use the asynchronous functionality a lot. However, you can have a look at almond providing your code uses AMD and (from the README):
optimize all the modules into one file -- no dynamic code loading.
all modules have IDs and dependency arrays in their define() calls -- the RequireJS optimizer will take care of this for you.
only have one requirejs.config() or require.config() call.
do not use RequireJS multiversion support/contexts.
do not use require.toUrl() or require.nameToUrl().
do not use packages/packagePaths config. If you need to
use packages that have a main property,
volo can create an adapter module so
that it can work without this config. Use the amdify add command to
add the dependency to your project.
Almond is great because it doesn't need require.js at all; it wraps your own code with itself, which is a very minimal AMD loader skeleton and nowhere near as powerful as the main library. You then get a single optimised file that can be linked directly in your HTML:
<script src="scripts/common.js"></script>
The Gruntfile config for almond could look something like this:
compile: {
options: {
name: 'path/to/almond',
baseUrl: 'js',
include: ['main'],
insertRequire: ['main'],
mainConfigFile: 'scripts/config.js',
out: 'scripts/main.js',
optimizeAllPluginResources: true,
wrap: true
}
}
The above is all standard r.js boilerplate, you can find many more examples at the almond homepage.
The following code does not work:
define([
'jquery',
'lodash',
'backbone',
'mustache',
'text!/app/js/templates/TreeCombo/TreeCombo.html' //Is this right?
], function($, _, Backbone, Mustache, MyTemplate){
...
})
I've got the following error messages in the console:
GET http://localhost:8888/app/js/text.js 404 (File not found)
It seems the requireJS is not recognizing the "text!" tag.
You need to include the "text" plugin within your project (and set up the path to it in the require.config if needed). It is not bundled in.