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

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

[JonathanTiu]

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

[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`

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

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.

[JonathanTiu]

this is true. i am also using Typescript.

[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-stylesh...

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

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