Here is the setup of my website:
Index.html
<!DOCTYPE html>
<html>
<head>
<script>
var require = {
paths : {
jQuery : "jquery-1.7.2.min"
},
baseUrl: "/scripts"
};
</script>
<title>Javascript RequireJS Example</title>
</head>
<body>
<div id="test"></div>
<script src="scripts/require.js" type="text/javascript" data-main="main.js"></script>
</body>
</html>
hello-wired-spec.js
define({
message: "I haz been wired",
node : "#test",
helloWired: {
create: {
module: 'hello-wired'
},
ready: {
sayHello: [{ $ref : 'node' }, { $ref : "message" }]
}
},
plugins: [
{ module: 'debug', trace: true }
]
});
hello-wired.js
define(["jQuery"], function() {
function HelloWired() {}
HelloWired.prototype = {
sayHello: function(node, message) {
$(node).html("Hello! " + message);
}
};
return HelloWired;
});
main.js
require(["wire!hello-wired-spec", "jQuery"], function (spec) {
console.log(spec);
});
So I'm using Require.js and wire.js to write a simple IoC prototype website. My issue is that I see the following in the console of the browser when I load the index.html page:
DEBUG (total: 1ms, context: 0ms / 0ms): Context init
---------------------------------------------------
WIRING: No progress in 5000ms, status:
checkPaths()
logger.error(tag + ': No progress in ' + timeout + 'ms, status:');
---------------------------------------------------
Components that DID NOT finish wiring
plugins[]: created
Object { module= "debug" , trace= true , id= "plugins[]" }
helloWired: created
Object { create={...}, ready={...}, id="helloWired"}
---------------------------------------------------
So it looks like I've missed something but I've no idea what to do here. Can someone help please?
EDIT
Here is the Scripts folder in my site:
EDIT OK I've changed the project structure slightly, and the HTML page:
<!DOCTYPE html>
<html>
<head>
<script>
var require = {
paths : {
jquery : "jquery-1.7.2.min",
wire : "wire/wire"
},
baseUrl: "/scripts",
packages: [
{ name: 'wire', location: 'wire', main: 'wire' },
{ name: 'when', location: 'when', main: 'when' },
{ name: 'aop', location: 'aop', main: 'aop' }
]
};
</script>
<title>Javascript RequireJS Example</title>
</head>
<body>
<div id="test"></div>
<script src="scripts/require.js" type="text/javascript" data-main="main.js"></script>
</body>
</html>
Now I wasn't getting any 404's before, but neither did I have the "Packages" config section. I did get some 404's after I changed the HTML, but I've fixed those by placing the /js files in the expected locations. After all of this, I still get the same error:
At first glance, it looks like it could be an AMD loader configuration issue. I typically try to keep the pieces of cujojs (wire, when, etc.) each library in its own folder, for example, keep wire in a wire/ directory. Then, I setup AMD package configs for each. See here for an example of how to do that--it looks like some of your code is based on my hello-wire.js example, so you could try emulating the package config there and adjusting it for you directory layout.
One thing you can check is the network panel in Firebug or WebKit to see if the files are being loaded, or if any are 404ing.
Probably unrelated, and just a suggestion: It looks like you're using jQuery as a global rather than strictly as an AMD module--e.g. it's listed in your AMD dep list, but isn't a param to your AMD factory functions. That's probably ok initially, but you may want to go the full AMD route at some point.