Using Dojo with ArcGIS Map SDK for JavaScript 4.29

Error Screenshot Here, I want to use dojo in ArcGIS Api for JS , but it give me script error when i import dojo through cdn link. Added SS of the code and Error. I am using the ArcGIS Map SDK for Javascript with the version 4.29. When i include the dojo using the CDN link then it gives me the Script error as shown in the error Screenshot attached here.

<!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>
</head>

<script src="https://js.arcgis.com/4.29/"></script>
<body>
    <script>
        require([
            "dojo/dom",
            "dojo/dom-construct",
            "esri/config",
            "esri/Map",
            "esri/views/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>
    <h1 id="viewDiv"></h1>
</body>
</html>

Solution

The error you are getting is probably cause by the order of you library imports. You also need to specify what is the name dojo, if not it will try to search it on esri library.

So,

first use dojoConfig to specify what is dojo and any other module you will need
then declare your origins of the libraries (<script>)
then your main script

Example,

<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Using Dojo from CDN with ArcGIS Maps SDK for JavaScript 4.30</title>
<style>
    html,
    body,
    #viewDiv {
        padding: 0;
        margin: 0;
        height: 500px;
        width: 100%;
    }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
<!-- i) declares names -->
<script>
    var dojoConfig = {
        baseUrl: "//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo",
        packages: [
            {
                name: "esri",
                location: "https://js.arcgis.com/4.30/esri"
            },
        ]
    };
</script>
<!--ii) import libraries -->
<script src="https://js.arcgis.com/4.30/"></script>
<!--iii) main-->
<script>
    require(
        ["dojo/dom", "dojo/dom-construct", "esri/Map", "esri/views/MapView"],
        (dom, domConstruct, Map, MapView) => {
        const map = new Map({
            basemap: "topo-vector"
        });

        const view = new MapView({
            container: "viewDiv",
            map: map,
            zoom: 4,
            center: [15, 65] // longitude, latitude
        });

        const greetingNode = dom.byId('greeting');
        domConstruct.place('<em> Dojo!</em>', greetingNode);
    });
</script>
</head>

<body>
<h1 id="greeting">Hello</h1>
<div id="viewDiv"></div>
</body>

</html>

EDIT:

You have to play with dojoConfig in order to avoid redefinition or interference of libraries. In this case I use baseUrl to define dojo origin, and then declare esri and its path in packages. There are others possible ways.