I am trying to get Esri ArcGis's NPM package to work with SvelteKit.
The @arcgis/core is supposed to be ESM per the linked documentation. However, when I try to import it into SvelteKit as shown here I get an error about CommonJS. In a new SvelteKit app change index.svelte to
<script>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
</script>
Will produce the error
Named export 'setAssetPath' not found. The requested module '@esri/calcite-components/dist/components/index.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:
import pkg from '@esri/calcite-components/dist/components/index.js';
const {setAssetPath: o} = pkg;
Sandbox demonstrating error here.
First off, I thought this issue had to do with Vite. So I imported @arcgis/core in vite as this tutorial shows. It works fine.
If I go and look at @esri/calcite-components/package.json, which @arcgis/core imports, I see that @esri/calcite-components/package.json does not have "type": "module" set. It appears that @arcgis/core is importing a CommonJS module.
When I tried to debug further I realized calcite-components is a Stencil project which does include ESM though the error claims the package is CommonJS. Either way, the error itself had a recommended fix. When I go into the problem file and apply the fix:
node_modules/@arcgis/core/widgets/support/componentsUtils.js
// import{setAssetPath as o}from"@esri/calcite-components/dist/components/index.js" Old import statement
import pkg from '@esri/calcite-components/dist/components/index.js';
const {setAssetPath: o} = pkg;
it fixes the issue. Then a new one is created, which I believe is different, in the file node_modules/@arcgis/core/widgets/support/chartUtils.js:
The first line of that file is:
import{chartColorSets as t}from"@esri/calcite-colors";
With the error
The requested module '@esri/calcite-colors' does not provide an export named 'chartColorSets'.
This is strange to me because calcite-colors is ESM and does have named exports. If I remove all the imports from @arcgis/core and just copy / paste import{chartColorSets as t}from"@esri/calcite-colors" into my index.svelte it works fine.
Why does a Vite project work just fine and why does SvelteKit report calcite-colors does not have a named export only when it is imported via @arcgis/core and not via my index.svelte?
Others have had this issue on the esri forums