topic ESM Modules Broken - Error resolving module specifier “luxon”. in ArcGIS JavaScript Maps SDK Questions

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

corndog — Tue, 01 Feb 2022 23:40:21 GMT

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

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.

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

AndyGup — Wed, 02 Feb 2022 00:05:35 GMT

@corndogdid you look at any of the samples we have here: https://github.com/Esri/jsapi-resources/tree/master/esm-samples? I'm actually in the process of updating the guide topic page, it needs to mention that you are required to have local build tools in order to use @arcgis/core modules.

I also noticed you are importing both the AMD CDN via a script tag, and @arcgis/core, that will cause API conflicts.

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

corndog — Wed, 02 Feb 2022 00:42:33 GMT

@AndyGupI'm just using HTML + vanilla javascript with node to install the @arcgiscore files locally , can you expand on what you mean by local build tools? Taking the guide topic at face value doesn't work for me.

In the samples you shared should I be copying the jsapi-node implementation?

I will remove the AMD CDN, but I have toggled it out with comments previously and I still get the same error.

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

corndog — Wed, 02 Feb 2022 00:45:42 GMT

Additionally on the guide there is nothing about supported node versions, that would be nice as I still can't rule that out as a potential issue

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

ReneRubalcava — Wed, 02 Feb 2022 16:07:28 GMT

You'll want to look at the samples linked in the doc page.

https://github.com/Esri/jsapi-resources/tree/master/esm-samples

The API is meant to be built with some sort of build tool, webpack, vite, rollup, etc. Those build tools take the relative paths into consideration. That's why you get that weird error.

We don't have a minimum node version, but would assume minimum Node ESM support, which is 12+. But that really comes into play moreso with build tooling.

I was trying to find the blog post from ESM release, but while looking, found this cool story map on. AMD to ESM migration that might be useful.

https://storymaps.arcgis.com/stories/5eb1c08d87fc437bb6d4d263a8cd9476

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

corndog — Wed, 02 Feb 2022 20:23:53 GMT

Sorry as a beginner this doesn't help, how do I use buildtools? Do you have examples of using buildtools?

Its not very beginner friendly which is quite dissapointing. Even moving the JavaScript out of its own file and into the HTML file still results in the same error :

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

This looks like an import error on ESRI's part, not mine

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

corndog — Wed, 02 Feb 2022 20:25:51 GMT

The shared resource has extrremely lacking detail when reading about webpack. I'm at the point of giving up and just reverting to using AMD, absolutely ridiculous documentation that doesn't even work as intended

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

corndog — Wed, 02 Feb 2022 20:28:40 GMT

Plus according to the chrome console the path '@arcgis....' is illegal as "Relative module specifiers must start with “./”, “../” or “/”." .........................

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

AndyGup — Wed, 02 Feb 2022 21:21:04 GMT

Hi @corndog any chance you able to open a tech support ticket? They might be able to help get you pointed in the right direction.

I'm curious why you are looking to migrate to ESM? AMD is a perfectly acceptable approach. We mention that in the documentation here: https://developers.arcgis.com/javascript/latest/tooling-intro/#should-i-migrate-to-es-modules. If you use the AMD CDN without a JavaScript framework or local build tools, then there’s no need to migrate. The AMD modules will be available for the foreseeable future, and the AMD and ES modules have the same API capabilities..

Lastly, we have an ESM CDN that can be used for prototyping and testing-only. That might be a good place to start since you don't need node or npm. Here's a link to that sample application: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-esm-cdn and the source code is in that directory: https://github.com/Esri/jsapi-resources/blob/master/esm-samples/jsapi-esm-cdn/esm-cdn.html.

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

corndog — Wed, 02 Feb 2022 22:05:54 GMT

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

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

corndog — Wed, 02 Feb 2022 22:37:49 GMT

@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

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

corndog — Thu, 03 Feb 2022 00:28:38 GMT

@ReneRubalcavain the node example there is no index.html or anything to get an idea of how to build a webapp ...