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.
Related
I have configured paths for handlebars and underscore in Requirejs config like so:
require.config({
baseUrl: '/js/',
paths: {
/* Core Libraries */
underscore : 'libs/underscore/underscore-min',
backbone : 'libs/backbone/backbone-min',
handlebars: 'libs/handlebars/handlebars.min'
}
This is how I initialize requirejs:
<script type="text/javascript" data-main="/js/main" src="/js/libs/require/require.js"></script>
When i refresh the page multiple times, I get an error message saying:
Uncaught Error: Script error for "handlebars".
Digging a little deeper, I could see in the network tab of Chrome Dev tools that it's basically a 404 not found for the modules:
404 Not Found - http://localhost:8888/js/underscore.js
The above path is not the one configured in require.config.
I'm not able to exactly pinpoint the issue as this occurs only intermittently.
Any help is much appreciated.
Thank you.
Backbone.js needs underscore.js so if you refresh the page multiple times the libraries may not be loaded with the correct order
Please try shim configuration as below;
require.config({
baseUrl:'js',
paths: {
/* Core Libraries */
underscore : 'libs/underscore/underscore-min',
backbone : 'libs/backbone/backbone-min',
handlebars: 'libs/handlebars/handlebars.min'
},
shim:{
'backbone': {
deps: ['underscore']
}
}
}
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 am trying to get the require-js text plugin to work with the karma-testrunner
I downloaded both with npm. I got karma working with requirejs, it is only the text-plugin that is making me some trouble.
When I add the text.js file to the files that karma serves I get a mismatch Error for it:
Uncaught Error: Mismatched anonymous define() module: function (module) {
//code from text plugin
If I don't serve the file with the text-plugin or exclude in karma.conf it I get a script Error from requirejs
(and a karma Warning: 404/base/text.js)
Uncaught Error: Script error for: text
I added the following to my require config file:
require.config({
paths: {
text: './text.js' //also tried text.js
}
})
but that doesn't seem to change anything
I have the dependency on the text plugin and template declared like this:
define(['text!views/viewtemplate.html'], function (template) { ...
I was having this issue, too, as I was trying to bring mock JSON files into my test files and parse them with JSON.parse(requirejsInjectedJsonText).
The issue I had was forgetting to update my karma config file with the require-js-text and mock files:
files: [
{pattern: 'mocks/**/*.json', included: false},
{pattern:'lib/requirejs-text/text.js', included: false},
'config/require.config.js'
]
After adding these in place (requirejs config reference must always be in the last index of 'files' array in the karma config file), I was able to successfully pull in my mock data.
For the record, as I was fiddling around, I went as far as #ddd in adding the shim to the require config, i.e.:
shim: {
'text': {'exports': 'text'}
}
But, it turned out to be unnecessary after I removed it AND had the karma config setup as above.
Cheers!
This is a config file in the /themes/ifd/js/ folder:
require.config({
// Initialize the application with the main application file
deps: ['plugins/console', 'main'],
baseUrl: '/themes/ifd/js/components'
paths: {
jquery: 'jquery/jquery.min',
flexslider: 'flexslider/jquery.flexslider-min',
easydropdown: 'easydropdown/jquery.easydropdown.min',
bpopup: 'bpopup/jquery.bpopup.min',
jqrangeslider: 'jqrangeslider/jQRangeSlider',
jqueryui: 'jquery-ui/js/jquery-ui-1.10.4.custom.min'
// More additional paths here
},
shim: {
jqueryui: 'jquery'
},
// Prevent caching issues, by adding an additional URL argument
urlArgs: 'bust=' + (new Date()).getDate()
});
I've got a main.js file in the /themes/ifd/js folder too:
require([
// Require the modules
'modules/module',
'jquery',
'flexslider',
'easydropdown',
'bpopup',
'jqueryui',
'jqrangeslider'
], function (module) {
'use strict';
// Rest of a file
And rest of files (modules?) are inside /themes/ifd/js/components:
Screenshot of list of files
In my HTML I have:
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
The messages I see in Chrome console:
GET http://DOMAIN/themes/ifd/js/jquery.js 404 (Not Found) requirejs.js:34
GET http://DOMAIN/themes/ifd/js/flexslider.js 404 (Not Found)
I can't find what is wrong and why it doesn't search in components directory...
The entry point for requirejs is the main module specified in the html file.
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
requirejs loads '/themes/ifd/js/main.js' 1st. Now in the main.js file, require([...]) try to load in the module specified in the args but requirejs won't be able to find them.
The reason is that requirejs does not know about them since require.config (...) is not executed.
Need to have 'require.config (...)' in '/themes/ifd/js/main.js' to do all the settings
Here is a working example. It includes Requirejs, jQueryMobile, Backbone, and Marinonette.
In the index.html file, you need to specify the main module for requirejs to load.
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In this example, the main module is under "js/main.js"
Inside, main.js, you specify the require.config and use define to load your modules.
The network activity you show us indicates that your configuration is completely ignored by RequireJS. And you say "Then i have that in my html":
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
You've shown the contents of /themes/ifd/js/main.js but it does not include your configuration, which apparently is in a different file.
The solution here would be to move your call to require.config into your main.js file, before your call to require.
It looks like you're just loading main.js and never telling RequireJS to use your config.
This RequireJS issue lists several ways to load both a config and a main -
put the config on the HTML before you require the top-level module.
load the config.js with another tag.
do a nested require() on the HTML file (require config than require your main).
do a nested require() inside main.js.
keep the configuration inside main.js
The best approach will vary based on your project structure, I've been doing 5 way more often than the others since I usually have a single entry-point for all pages, but in some cases I used 1 and 2.
Further down the page some code examples of these approaches are also shown.
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.