topic Re: Question about import syntax for Map web components in ArcGIS JavaScript Maps SDK Questions

Question about import syntax for Map web components

JonathanTiu — Tue, 09 Dec 2025 01:02:47 GMT

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

Re: Question about import syntax for Map web components

Sage_Wall — Tue, 09 Dec 2025 15:22:44 GMT

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.

Re: Question about import syntax for Map web components

JonathanTiu — Fri, 12 Dec 2025 01:13:23 GMT

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

Re: Question about import syntax for Map web components

Sage_Wall — Fri, 12 Dec 2025 15:46:04 GMT

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`

Re: Question about import syntax for Map web components

JasonDoingMaps — Fri, 19 Dec 2025 05:01:12 GMT

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.

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.

Re: Question about import syntax for Map web components

JonathanTiu — Fri, 19 Dec 2025 18:14:21 GMT

this is true. i am also using Typescript.

Re: Question about import syntax for Map web components

Sage_Wall — Fri, 19 Dec 2025 21:53:53 GMT

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

Re: Question about import syntax for Map web components

Sage_Wall — Fri, 19 Dec 2025 22:30:54 GMT

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" },

Re: Question about import syntax for Map web components

JasonDoingMaps — Sat, 20 Dec 2025 00:26:01 GMT

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

Re: Question about import syntax for Map web components

JasonDoingMaps — Sat, 20 Dec 2025 01:17:09 GMT

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.

Re: Question about import syntax for Map web components

Sage_Wall — Sat, 20 Dec 2025 18:40:14 GMT

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.