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

Question about import syntax for Map web components

JonathanTiu

Hi,

On the official documentation it says to import web components like this:

import '@arcgis/map-components/components/arcgis-scale-bar'

but in practice i have to import it with the dist folder or else it won't find it.

on disk, i do see the folder path under node_modules is arcgis/map-components/dist/components/arcgis-scale-bar but it feels like there is some missing mapping maybe.

import '@arcgis/map-components/dist/components/arcgis-scale-bar'.

i did an npm install and saved it to my package.json. I'm not sure why i have to specify the dist folder

Jonathan

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

Sage_Wall

Thanks for the additional information @JasonDoingMaps . I'll add some information about the moduleResoultion setting to our documentation to hopefully avoid this confusion for other users in the future.

JasonDoingMaps

The moduleResolution setting in tsconfig makes a difference. I see in the repo Sage_Wall linked, it specifies "bundler" for this property, whereas I'm using "node". (Per the guide on Webpack's site - https://webpack.js.org/guides/typescript/).

Reading into it, module resolution "node" is an older version, which seems to not support package.json "exports". Recommendations online point to "node16" or "nodenext" - for my example, these got part-way there, the import was fine, but VS Code was still putting a squiggly line under the reference to HTMLArcgisScaleBarElement property "barStyle". (Though it doesn't produce a build error). Moduleresolution "bundler" seems to satisfy all cases: it doesn't require "dist" in the import, VS Code is happy with the reference to custom element property, and build doesn't produce any errors.

In my legacy project, I'm a little hesitant to switch moduleResolution just for the sake of getting rid of "dist" in the import statements. I haven't experienced any other issues using the "node" resolution strategy. I wonder if the guide on the Webpack site might be a bit out of date though.

JasonDoingMaps

No, not using an old version of node, I'm running v24.12.0.

Sage_Wall

It seems like the exports property in the `@arcgis/map-components/package.json` file isn't working correctly for you. It's supposed for forward the `./components/` path to the `/dist/components/` path but apparently that isn't working right in your development environments. It would be nice to get this documented in some way to help with this situation.

// package.json exports
  "exports": {
    ".": "./dist/index.js",
    "./loader": "./dist/loader.js",
    "./package.json": "./package.json",
    "./components/*/customElement": "./dist/components/*/customElement.js",
    "./components/*": "./dist/components/*/index.js",
    "./types/*": "./dist/types/*.d.ts",
    "./docs/*": "./dist/docs/*",
    "./arcgis-map-components/arcgis-map-components.css": "./dist/cdn/main.css",
    "./dist/arcgis-map-components/arcgis-map-components.css": "./dist/cdn/main.css",
    "./dist/loader": "./dist/loader.js",
    "./dist/components": "./dist/index.js",
    "./dist/components/*": "./dist/components/*/index.js",
    "./main.css": "./dist/cdn/main.css"
  },

Sage_Wall

Are you guys using older versions of Node by chance? I've got this TS Github Repo that works with without the `dist` folder in the path. Just trying to narrow down what's happening. I know the assets can have issues with older development environments and wonder if something similar is happening here with the map component imports. I'm using node 24.11.0

https://developers.arcgis.com/javascript/latest/working-with-assets/#explicitly-import-local-stylesheets-if-necessary

JonathanTiu

this is true. i am also using Typescript.

JasonDoingMaps

I have the same issue, but only when using TypeScript. Find a basic repro attached. Unzip it, run `npm install`, and open the folder in VS Code. A JS file in the same project does not have the issue.

Per this screenshot, note that autocomplete only offers "dist" after "map-components".

If you don't include "dist" in the path, you'll get an error squiggle under the "barStyle" property of the arcgis-scale-bar element.

arcgis ts dist.png

In this example, I'm finding that it compiles fine whether you include "dist" or not.

I have another, much larger project, where excluding "dist" from the path is causing webpack compile errors. I haven't been able to isolate why that one behaves differently.

There's no Vite involved here. And as far as I can tell, no cache-related issues. At least not local cache. It's an entirely clean / new project.

ArcGis TS dist repro.zip

Sage_Wall

Weird, The only thing I can think of is that your node_modules folder or some sort of cache is corrupt. Have you tried deleting node_modules and then running `npm install`? Are you using Vite by chance, it makes it's own cache. You can force Vite to clear the cache with `npm run dev -- --force`

JonathanTiu

yes I am using 4.34 for both core and map-components?

Sage_Wall

Hi @JonathanTiu ,

Are you using the latest version (4.34) of the SDK or an older version? The import path above looks correct for the latest version, however in some previous versions the `dist` was needed in the imports. We hope to address situations like this in the future by providing documentation for older versions of the SDK online. Currently our documentation assumes you are using the latest version.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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