I am trying to load a module using require.js, and I have the following in my app.js:
require.config({
baseUrl: "js"
});
alert("hello world"); // for debugging
require(['eh2'], function(eh2) {
alert("nothing here"); // for debugging
});
When I run my application, though, despite the app.js being loaded, the module I'm requiring is never loaded - the "hello world" executes, but the "nothing here" doesn't!
My script tag in the HTML page looks like this:
<script type="text/javascript" src="js/lib/require.js" data-main="app"></script>
And eh2.js is located in the js folder, and it is wrapped in a define statement:
define(["./screens/Screens"], function(screens) {
return {
// code here
};
});
What am I doing wrong? Is require.js silently failing on loading some submodule under screens.js, perhaps?
Here is the code from the Screens module:
define([ "screens/TitleScreen", "screens/GameScreen" ], function(titleScreen, gameScreen) {
return {
screenFuncs: {
"TitleScreen" : titleScreen.TitleScreen,
"GameScreen" : gameScreen.GameScreen,
},
buildScreen: function(data) {
var func = screenFuncs[data.type];
var screen = new func(data.params);
return screen;
},
};
});
Do the paths in the define call need to be relative to the current location of the js file I'm in, or to the root defined in the app.js, anyway?
This usually happens because your JavaScript environment doesn't understand how to handle the call to require() function you defined in your code. Here are some known causes for this error: Using require() in a browser without RequireJS. Using require() in Node.
require() statement basically reads a JavaScript file, executes it, and then proceeds to return the export object. require() statement not only allows to add built-in core NodeJS modules but also community-based and local modules.
With require , you can include them in your JavaScript files and use their functions and variables. However, if you are using require to get local modules, first you need to export them using module.
A module in RequireJS is a scoped object and is not available in the global namespace. Hence, global namespace will not be polluted. RequireJS syntax allows to load modules faster without worrying about keeping track of the order of dependencies. You can load multiple versions of the same module in the same page.
replace this:
define(["./screens/Screens"], function(screens) {
....
});
either with an absolut path variant:
define(["screens/Screens"], function(screens) {
....
});
or use:
define(function(require) {
var screens = require("./screens/Screens");
....
});
From the docs:
Relative module names inside define():
For require("./relative/name") calls that can happen inside a define() function call, be sure to ask for "require" as a dependency, so that the relative name is resolved correctly:
define(["require", "./relative/name"], function(require) {
var mod = require("./relative/name");
});
Or better yet, use the shortened syntax that is available for use with translating CommonJS modules:
define(function(require) {
var mod = require("./relative/name");
});
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