Cannot understand why wire.js is failing to create object

Question

Cannot understand why wire.js is failing to create object

801 Views Asked by Jason Evans At 21 October 2024 at 05:33

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:

Scripts folder in my website

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>

enter image description here

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:

enter image description here

Original Q&A

There are 2 best solutions below

**unscriptable** · Answer 1

The problem is the capitalization of jQuery. When using a module that defines its own name (such as jQuery), you have to use the exact same name in your paths config and elsewhere. jQuery names itself "jquery", not "jQuery".

Change "jQuery" to "jquery" everywhere in the code.

Also, what Brian said is true. You should use the local jquery instance in your module like this:

define(["jquery"], function ($) { /* use $ here */ });

This lessens your reliance on globals and also allows you to potentially use more than one version of jquery simultaneously.

**Brian Cavalier** · Answer 2

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.

Cannot understand why wire.js is failing to create object

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in REQUIREJS

Related Questions in JS-AMD

Related Questions in WIREJS

Trending Questions

Popular # Hahtags

Popular Questions