Using Dojo with Javascript 4.29 and getting errors

Mr_Kirkwood

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).

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

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?

AndyGup

@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.

MirzaMuhammadAhsanAli

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>

<title>Tutorial: Hello Dojo!</title>

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>

</body>

</html>

Also attaching the Screenshot of the error.