Dojo 1.10 Widget is not a Constructor

Question

I have the following Custom Widget that I want to instantiate in another Javascript file named Core.js .

Dashboard Widget

define([
"dojo/_base/declare",
"dojo/_base/config",
"dojo/ready", 
"dojo/_base/window",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
], function(
   v_declare,
   v_config,
   v_ready,
   v_window,
   v_WidgetBase,
   v_TemplatedMixin,
) {
  return v_declare("dashboard", [v_WidgetBase, v_TemplatedMixin], {
    templateString: "<div>hello world</div>",
    constructor: function(setting) {
        console.log("smtg..");
    },
    buildRendering: function() {
        var v_context = this;
        var v_domNode = this.domNode;
        this.inherited(arguments);

        console.log('Expeerimental');
    },
    init: function() {
        console.log('Expeerimental');
    }
});
});

Instantiation of Dashboard Widget at Core.js

require([
"dojo/_base/config",
"dojo/_base/declare",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-style",
"dojo/on",
"dojo/topic",
"dojo/domReady!",
"ui/dashboard/dashboard"
], function(
    b_config,
    b_declare,
    b_dom,
    b_domClass,
    b_domStyle,
    b_on,
    b_topic,
    p_dashboard
 ) {

start();


function start(){
    console.log(p_dashboard);
    var dashboard = new p_dashboard();
};

});

However, at the line var dashboard = new p_dashboard(); , I get the following error:

TypeError: p_dashboard is not a constructor at HTMLDocument._461 (dojo.js:8) "in domReady callback" "TypeError: p_dashboard is not a constructor

I can't seem to figure out why is it having this error. Please enlighten me with any ideas? Thank you

Answer 1

I think your mistake is in the module's loading order ,

In your Core.js the ui/dashboard/dashboard widget was loaded after the Ready plugin , and in the call back function it's referenced directly after the topic module ( knwing that dojo/domReady! isn't referenced in the calback beacause Common convention is not to assign a return variable in the call back function )

So try to make ui/dashboard/dashboard before the dojo/domReady! and dojo will instantiate it correctly if the path was well configured in dojo config .

it shoudl like below :

require([
    "dojo/_base/config",
    "dojo/_base/declare",
    "dojo/dom",
    "dojo/dom-class",
    "dojo/dom-style",
    "dojo/on",
    "dojo/topic",

    "ui/dashboard/dashboard",

    "dojo/domReady!"
], ..... 
);

Answer 2

You call require with array of 9 elements and use in the function only 8. Last (8-th) element is dojo/domReady! .

require([
    "dojo/_base/config",     // 1 
    "dojo/_base/declare",    // 2
    "dojo/dom",              // 3
    "dojo/dom-class",        // 4
    "dojo/dom-style",        // 5
    "dojo/on",               // 6
    "dojo/topic",            // 7
    "dojo/domReady!",        // 8
    "ui/dashboard/dashboard" // 9
], function(
    b_config,                // 1. dojo/_base/config
    b_declare,               // 2. dojo/_base/declare
    b_dom,                   // 3. dojo/dom
    b_domClass,              // 4. dojo/dom-class
    b_domStyle,              // 5. dojo/dom-style
    b_on,                    // 6. dojo/on
    b_topic,                 // 7. dojo/topic
    /*********************************************************
                 Where is my dojo/domReady!??????
    *********************************************************/
    p_dashboard              // 8. ui/dashboard/dashboard
) {
    // ...
});

All, what you must do is moving "dojo/domReady" in the end of array for require :

require([
    "dojo/_base/config",
    "dojo/_base/declare",
    "dojo/dom",
    "dojo/dom-class",
    "dojo/dom-style",
    "dojo/on",
    "dojo/topic",
    "ui/dashboard/dashboard",
    "dojo/domReady!"
], function(
    b_config,   // dojo/_base/config
    b_declare,  // dojo/_base/declare
    b_dom,      // dojo/dom
    b_domClass, // dojo/dom-class
    b_domStyle, // dojo/dom-style
    b_on,       // dojo/on
    b_topic,    // dojo/topic
    p_dashboard // ui/dashboard/dashboard
                // dojo/domReady! is the self-called function
) {
    // ...
});