ReferenceError: declare is not defined

5018
5
Jump to solution
04-23-2013 01:40 PM
AaronConnolly
Occasional Contributor
Hi,

I'm trying to write my first DOJO class and re-use it within a very simple application, however I can't figure out why the `declare` method in DOJO is not defined?

Here is my DOJO class code in a separate file: mapManager.js

// CLASS
// mapManager

require(['dojo/_base/declare'], function(declare){      delcare("mapManager", null,   {   sourceMapNode: null,   maxZoomResolution: 10,    constructor: function(params){       this.params = params || {}; // Returns a object literal if undefined       // specifiy class defaults    this.sourceMapNode = params.sourceMapNode;    this.maxZoomResolution = params.maxZoomResolution;        // Hook up map movement events    alert("Hooking up map move events!");   }  }); });


Here is the index page that sets up the ESRI SDK, includes my special class and attempts to instantiate it.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Simple Map</title>     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">     <style>       html, body, #map {         height:100%;         width:100%;         margin:0;         padding:0;       }       body {         background-color:#FFF;         overflow:hidden;         font-family:"Trebuchet MS";       }     </style>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>     <script src="script/class/mapManager.js"></script>     <script>              dojo.require("mapManager");          function init() {                          var parameters = {                 sourceMapNode : "map",                 mapZoomResolution: 12                         };                        // Give map to map manager             var mapManager = new omega.mapManager(parameters);                      }                    dojo.ready(init);            </script> </head> <body class="claro">     <div id="map"></div> </body> </html> 


In Firebug the first error I see is:

---------------------------------------------
ReferenceError: delcare is not defined
[Break On This Error] 

delcare("mapManager", null,
---------------------------------------------

The second error I see is a 404 error:

---------------------------------------------
"NetworkError: 404 Not Found - http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/mapManager.js"
---------------------------------------------

Two questions:

1. What am I doing wrong? I have followed tutorials on DOJO's website and this should be working. Of course I have missed something important, I'm sure.
2. Why is custom class mapManager.js assumed to be a part of the DOJO library provided by ESRI? The second error indicates that the page "thinks" mapManager.js is part of the ESRI library when infact it's available locally.

Thanks
0 Kudos
1 Solution

Accepted Solutions
derekswingley1
Frequent Contributor
Bunch of things...

You had "delcare" instead of "declare" in your code.

Use define instead of require in mapManager.js and return the result from declare like so:
define([   "dojo/_base/declare" ], function(   declare ) {    return declare("omega.mapManager", null, {


Tell Dojo where mapManager is via dojoConfig.packages. Something like this:
    <script>       var dojoConfig = {         packages: [{           name: "omega",           location: location.pathname.replace(/\/[^/]+$/, "")         }]       }     </script>


If you're curious about that location.pathname part, read up on using custom modules from a CDN hosted version of Dojo (it's a quick read). Since Dojo knows where to find mapManager, do not include it with a script tag.

Finally, since you're creating an AMD module, load it with require instead of the (legacy) dojo.require.

Here's a working example:  http://dl.dropboxusercontent.com/u/2654618/simple-class/index.html

And here's a direct link to mapManager:  http://dl.dropboxusercontent.com/u/2654618/simple-class/mapManager.js

View solution in original post

0 Kudos
5 Replies
derekswingley1
Frequent Contributor
Bunch of things...

You had "delcare" instead of "declare" in your code.

Use define instead of require in mapManager.js and return the result from declare like so:
define([   "dojo/_base/declare" ], function(   declare ) {    return declare("omega.mapManager", null, {


Tell Dojo where mapManager is via dojoConfig.packages. Something like this:
    <script>       var dojoConfig = {         packages: [{           name: "omega",           location: location.pathname.replace(/\/[^/]+$/, "")         }]       }     </script>


If you're curious about that location.pathname part, read up on using custom modules from a CDN hosted version of Dojo (it's a quick read). Since Dojo knows where to find mapManager, do not include it with a script tag.

Finally, since you're creating an AMD module, load it with require instead of the (legacy) dojo.require.

Here's a working example:  http://dl.dropboxusercontent.com/u/2654618/simple-class/index.html

And here's a direct link to mapManager:  http://dl.dropboxusercontent.com/u/2654618/simple-class/mapManager.js
0 Kudos
AaronConnolly
Occasional Contributor
Bunch of things...

You had "delcare" instead of "declare" in your code.

Use define instead of require in mapManager.js and return the result from declare like so:
define([
  "dojo/_base/declare"
], function(
  declare
) { 
  return declare("omega.mapManager", null, {


Tell Dojo where mapManager is via dojoConfig.packages. Something like this:
    <script>
      var dojoConfig = {
        packages: [{
          name: "omega",
          location: location.pathname.replace(/\/[^/]+$/, "")
        }]
      }
    </script>


If you're curious about that location.pathname part, read up on using custom modules from a CDN hosted version of Dojo (it's a quick read). Since Dojo knows where to find mapManager, do not include it with a script tag.

Finally, since you're creating an AMD module, load it with require instead of the (legacy) dojo.require.

Here's a working example:  http://dl.dropboxusercontent.com/u/2654618/simple-class/index.html

And here's a direct link to mapManager:  http://dl.dropboxusercontent.com/u/2654618/simple-class/mapManager.js


Thanks, Derek. That spelling error is shameful. I appreciate the links.
0 Kudos
derekswingley1
Frequent Contributor
Thanks, Derek. That spelling error is shameful. I appreciate the links.


You're welcome...definitely the thing where a second set of eyes helps. Hope you find the additional info helpful as well.
0 Kudos
AaronConnolly
Occasional Contributor
You're welcome...definitely the thing where a second set of eyes helps. Hope you find the additional info helpful as well.


Indeed. One question, why in the mapManager.js do you not provide a class name with the declare? How does DOJO "know" that the omega.mapManager is the class defined there in /mapManager.js? Is the file name important as well?
0 Kudos
AaronConnolly
Occasional Contributor
Indeed. One question, why in the mapManager.js do you not provide a class name with the declare? How does DOJO "know" that the omega.mapManager is the class defined there in /mapManager.js? Is the file name important as well?


Nevermind. I just read from the DOJO guide:

"Class names can still be explicitly created using the first argument passed to define, but this is optional. If define is not passed a string as the first argument, the module identifier will be built using the module's path and file name."
0 Kudos