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.

AndyGup · ‎02-01-2022

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

corndog · ‎02-01-2022

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

corndog · ‎02-01-2022

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

corndog · ‎02-02-2022

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

ReneRubalcava · ‎02-02-2022

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

corndog · ‎02-02-2022

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

corndog · ‎02-02-2022

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

corndog · ‎02-02-2022

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

AndyGup · ‎02-02-2022

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.