AMD to ESM in Simplified Display a Map Example

[IfThenTim]

Hello all! This is my first post beyond my introduction. 

I thought it would be good to see if I could convert my JavaScript code for the Display a Map tutorial from AMD to ESM. When it didn't work, I made an even simpler version -- which still doesn't work. <g>

This is the AMD version that works as-expected:

require([
    "esri/config",
    "esri/Map", 
    "esri/views/MapView"
], function(esriConfig, Map, MapView) {

        esriConfig.apiKey = "not-my-actual-api-key";

        // create basemap 
        const map = new Map({
            basemap: "arcgis-navigation"
        });

        // set a map view
        const view = new MapView({
        map: map,
        center: [-82.998794, 39.961176], // Columbus, Ohio 39.961176 / -82.998794
        zoom: 9,
        container: "viewDiv" 
        });
    });

This is the ESM version that does not work:

import esriConfig from "@arcgis/core/config";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";


esriConfig.apiKey = "not-my-actual-api-key";

// create basemap 
const map = new Map({
    basemap: "arcgis-navigation"  
});

// set a map view
const view = new MapView({
map: map,
center: [-82.998794, 39.961176], // Columbus, Ohio 39.961176 / -82.998794
zoom: 9, 
container: "viewDiv"
});

Everything below the API code is the same, so I am supposing the trouble happens there or above. With that in mind, I was seeking an ESM example of config using the API key, but I could not find one. Also, I am supposing I shouldn't post my actual API key, so I removed that from both blocks of code.  

What changes would fix the ESM code?

[ReneRubalcava]

Is there a particular error with this sample? Are you using your API key from developers.arcgis.com?

Here's a video that walks through the steps.

[IfThenTim]

Thank you for your reply and the link to the video. I learned a lot watching that video, but I was not able to resolve my problem or quickly/easily replicate the results of the video. I did notice some naming differences in loading config and the API key compared to what I was doing.

Given that using AMD eliminates all of the problems in my test example, it's practical enough for me to embrace that approach for the near term.

[shaylavi]

You didn't provide enough details to understand your problem but I believe that if you'll follow closely the following tutorial, you won't have any issues -

https://developers.arcgis.com/javascript/latest/display-a-map/

[Sage]

@IfThenTim ,

I was wondering if you installed the ES modules with npm?

npm install @arcgis/core

Otherwise you would need to change your import statements to use the ES modules CDN

import esriConfig from "https://js.arcgis.com/4.21/@arcgis/core/config.js";
import MapView from "https://js.arcgis.com/4.21/@arcgis/core/views/MapView.js";
import Map from "https://js.arcgis.com/4.21/@arcgis/core/Map.js";

I don't think this is explained in the tutorial, as it assumes you are using AMD, but it is described on the install and setup webpage: https://developers.arcgis.com/javascript/latest/install-and-set-up/

There are also some samples using ES modules available on GitHub: https://github.com/Esri/jsapi-resources/tree/master/esm-samples

If you intend to use the ES modules from CDN also make sure and change your script tag to be of type module

<script type="module">
....
</script>

I hope this helps,

Sage

[IfThenTim]

I was wondering if you installed the ES modules with npm?

That's a good question, but yes, I did install the ES Modules with npm.

[IfThenTim]

To maybe bring some sort of closure to this: After doing the Display a Map tutorial, I tried to adapt it for Angular using ES modules. When that did not work, I thought I might simplify it for seeking support to bring it back to vanilla JS. But in reading/watching more video on my own, I think I have discovered that I lost the "bundler" functionality needed to use ES modules. And/or there may be other problems too. <g>

If I decide to ask for support on running something like the Display a Map exercise in Angular with ES modules, I will make a separate post for that. Thanks to all who attempted to assist me. I have a lot to learn.