nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

corndog

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.

Najděte více příspěvků označených jako

Accepted answers

All comments

corndog

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

corndog

@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

corndog

@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

}

AndyGup

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.

corndog

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

corndog

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

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

RRubalcava

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

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

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

AndyGup

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

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.