ESM Modules Broken - Error resolving module specifier “luxon”.

corndog · ‎02-01-2022

I am using node v17.4.0 and trying to make a very simple web app. This is the tree structure and I have installed @arcgis/core according to https://developers.arcgis.com/javascript/latest/es-modules/

The map does not load at all, and I get an error:

Uncaught TypeError: Error resolving module specifier “luxon”. Relative module specifiers must start with “./”, “../” or “/”. languageUtils.js:5:508

├── frontend
│ ├── index.html
│ ├── js
│ │ ├── app.js
│ └── node
│          ├── node_modules

<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <!-- SCRIPTS SECTION START -->
  <!-- ArcGIS -->
  <script src="https://js.arcgis.com/4.22/"></script>
  <!-- Local Scripts -->
  <script src="js/app.js" type="module"></script>
  <!-- SCRIPTS SECTION END -->
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>

import Map from "../node/node_modules/@arcgis/core/Map.js";
import MapView from "../node/node_modules/@arcgis/core/views/MapView.js";

const map = new Map();

const view = new MapView({
    container: "viewDiv",
    map: map,
});

Extremely frustrating trying to move away from AMD to ESM and it doesn't even work out of the box.

corndog · ‎02-02-2022

@AndyGupI will open a ticket, but it shouldn't be the solution as a user, it should work out of the box for something so basic?

I'm looking to ESM as its best practice in ES6, and I do not like the scoping inherent to using require like so, its extremely cumbersome and makes scaling an application a cumbersome process.

Does the below look user friendly or straightforward? Surely there MUST be a better way, hence the need for ESM

require(
    [
        "esri/Map",
        "esri/views/MapView",
        "esri/geometry/Polygon",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/BasemapToggle",
        "esri/layers/WebTileLayer",
    ],
    (
        Map, MapView, Polygon, Graphic, GraphicsLayer,
        BasemapToggle, WebTileLayer
    ) => {

// All code goes here

}

corndog · ‎02-02-2022

@AndyGup additionally the app I'm developing is for an intranet, so I need the files locally and not via a call to arcgis such as the below