Sveltekit: Importing ESM package produces errors that works with vite

Question

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

Answer 1

Use dynamic imports inside the onMount block

<script lang="ts">
    import { onMount } from 'svelte';

    onMount(async () => {
        const Map = (await import('@arcgis/core/Map')).default;
        const MapView = (await import('@arcgis/core/views/MapView')).default;

        const map = new Map({
            basemap: 'gray-vector'
        });

        const view = new MapView({
            container: 'viewDiv',
            map: map
        });

        view.when(() => {
            console.debug('Map loaded');
        });
    });
</script>

<div id="viewDiv" />

<style>
    @import '@arcgis/core/assets/esri/themes/light/main.css';
    
    #viewDiv {
        min-height: 500px;
    }
</style>