CODEWITHSUNDEEP
javascriptmoduledojorequirejsamd
Graham Hargrove
Graham Hargrove

Reputation: 81

Cannot load Dojo modules with RequireJs

I think there is something I am missing. I have read that you can use dojo modules using RequireJS instead of using the Dojo loader. I'm semi comfortable with RequireJS and defining modules but I can't seem to figure out what is happening. I looked at the dojo js files and noticed that they were using define() just the same as when I declare my own modules. My files are organized like this

// File path
-js
    main.js
    - lib
        .require.js
        -dojo
            // All dojo files

I'm not sure what I'm missing but when I attempt to load a Dojo module the value is undefined. Heres some sample HTML:

// index.html
<html>
    <head>
    </head>
    <body>
        // include require script & set main.js
        <script data-main="js/main" src="js/lib/require.js"></script>
    </body>
</html>

and a sample main.js file...

    // Sample main.js file

    // BaseUrl = js/

    require.config({
        packages : [
            name     : 'dojo',
            location : 'lib/dojo';
        ]
    });

    require(['dojo', 'dojo/dom'], function(dojo, dom) {

        // 'dojo'     should load dojo/main.js
        // 'dojo/dom' should load dojo/dom.js

        // But they have a value of "undefined" when I look at them in the console
        console.log(dojo);
    });

Any ideas what I'm doing wrong? as a side note sometimes I get this error in the console

TypeError: _3.add is not a function
[Break On This Error]   

_3.add("dom-addeventlistener",!!document.addEventListener);

Thanks in advance!

Upvotes: 2

Views: 2458

Answers (4)

Anil Agrawal
Anil Agrawal

Reputation: 3026

Put all your dojo files in js folder.

your folder structure should be like 

// Folder structure
-js
    -dojo
    -dijit
    -dojox

Note: Make sure you provide the access to js/* path. So that url : http://localhost:8080/app/js/dojo/dojo.js accessible.

Then add dojo modules using requireJS using below script,

setTimeout(

    function() {
        var dojoConfig = {
            async : true
        };

    require.config({
        packages : 
            [ {
                name : 'dojo',
                location : '../js/dojo'
            } ],    
    });

    require(
        [ 'dojo', 'dojo/dom' ],
        function(dojo, dom) {
            console.log(dojo);
            dom.byId("myDiv").innerHTML = "updatedHTML content";
    });

}, 1000);

thats it.

Upvotes: 1

Chris2M
Chris2M

Reputation: 183

_3.add("dom-addeventlistener",!!document.addEventListener); is actually has.add("dom-addeventlistener", !!document.addEventListener);

The error _3.add is not a function is caused by the fact that requirejs unlike dojo's AMD implementation does not define the has.js API. Dojo tries to pull the has.js implementation from the AMD loader. If using a foreign loader, you must indicate it via dojoConfig. When running a minified build you need to add the staticHasFeatures to the build profile:

staticHasFeatures: {
    "dojo-has-api": 0 // default 1
}

Doing so has solved the issue for me.

Further info

Upvotes: 1

EugeneZ
EugeneZ

Reputation: 1643

_3 is an indicator that you are using the minified, standalone distribution of dojo. If you want to use Dojo with a different loader, I believe you want to be using the Source/SDK download from their download page.

Upvotes: 0

Simon Boudrias
Simon Boudrias

Reputation: 44589

First of all, your package config definition is an array of object:

require.config({
    packages : [
        {
            name     : 'dojo',
            location : 'lib/dojo';
        }
    ]
});

After, well, you should check in your devtools network tab to make sure require.js is loading the right file and that the path is good. Remember that location is relative to the baseUrl.

Hope this help !

Upvotes: 0

Related Questions