Using Dojo with Javascript 4.29 and getting errors

207
2
06-14-2024 11:25 AM
Mr_Kirkwood
New Contributor

I am writing a simple HTML file with a map using Javascript 4.29.  We are tring to migrate our JavaScript 3.46 applications. The dojo code works when the map.js is commented out (see below).

 dojoA.JPG

When i uncomment the map.js the dojo code breaks but the map will show up. I am getting these errors

 

dojoB.JPG

here is the code:

 

<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" href="Icons/steamboat.png" />
        <meta charset='utf-8'>
        <title>Tutorial: Hello Dojo!</title>
        <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
        <link rel="stylesheet" href="css/allStyles.css">
        <link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css">
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #attachmentsDiv {
                height: 100%;
                width: 780px !important;
                overflow: hidden;
                border: 2px #492f24 solid;
                float: left;
                padding: 5px;
                min-width: 240px;
            }
            #viewDiv {
                height: 100%;
                max-width: 100%;
            }
            .queryImg {
                width: 220px;
                padding: 2px;
            }
            .container {
                height: 50%;
                width: 100%;
            }
        </style>
        <script>dojoConfig = {parseOnLoad: true}</script>
        <!-- load Dojo -->
        <script src='dojo/dojo/dojo.js' data-dojo-config='async: true'></script>
        <script>
            require (["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);
        </script>
        <script src="https://js.arcgis.com/4.29/"></script>
                    <script src="js/map.js"></script>
    </head>
    <body class="claro">
        <h1 id='greeting'>Hello UW </h1>
        <div id="attachmentsDiv" class="esri-widget">
            <button id="button1" type="button">Button1</button>
            <button id="button2" data-dojo-type="dijit/form/Button" type="button">Button2</button>
            <button id="button3" data-dojo-type="dijit/form/Button" type="button">Button3</button>
            <div>Button4</div>
            <div style="height: 105px;">
                <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%;" >
                    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
                        Lorem ipsum and all around...
                    </div>
                    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab" data-dojo-props="closable:true">
                        Lorem ipsum and all around - second...<br />
                        Hmmm expanding tabs......
                    </div>
                    <div data-dojo-type="dijit/layout/ContentPane" title="My last tab">
                        Lorem ipsum and all around - last...<br />
                        <br />
                        <br />
                        Hmmm even more expanding tabs......
                    </div>
                </div>
            </div>
            <div id='tocProjectsDiv'></div>
            <div id="queryResults" ></div>
        </div>
        <div id="viewDiv">
        </div>
    </body>
</html>

 

Does anyone have any ideas? 

 

 

Tags (3)
0 Kudos
2 Replies
AndyGup
Esri Regular Contributor

@Mr_Kirkwood  You'll need to set up dojoConfig.packages. More info and an example are here: https://developers.arcgis.com/javascript/latest/4.25/#removal-of-non-esri-packages-from-cdn.

0 Kudos
MirzaMuhammadAhsanAli
New Contributor

Hello @AndyGup, Can you please guide me on how to use Dojo with the ArcGIS API for JavaScript version 4.29? When I include Dojo using its CDN link, it gives me a script error.Here is my code 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script src="https://js.arcgis.com/4.29/"></script>

    <script>
        require([
            "dojo/dom",
            "dojo/dom-construct",
            "esri/config",
            "esri/Map",
            "esri/MapView",
        ], function (dom, domConstruct, esriConfig, Map, MapView) {
            esriConfig.apiKey = "API KEY HERE";

            const map = new Map({
                basemap: "arcgis/topographic"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.243683, 34.052234],
                zoom: 13
            });
        });
    </script>

</head>

<body>
    <h1 id="viewDiv"></h1>
</body>

</html>
 
Also attaching the Screenshot of the error.Error.PNG
0 Kudos