Svelte Kit Build Error

[Sage]

I started messing around with Svelte and specifically SvelteKit.  My goal was just to see if I could make a simple mapview component.  I ran into error when the app tries to build:

Named export 'commitAssetPath' not found. The requested module '@esri/calcite-components/dist/custom-elements/utils.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/custom-elements/utils.js';
const {commitAssetPath: s}from"@esri/calcite-components/dist/custom-elements/utils.js";import{getAssetUrl: t}from"../../assets.js";import"../../core/has.js";import{makeAbsolute: o}from"../../core/urlUtils.js";let e;function m(){s(o(t(e)))}e="components/assets";export{m: commitAssetPath} = pkg;

It looks like calcite is a dependency in @arcgis/core/widgets/support/componentsUtils.js

This is the very simplistic component I wrote, there could be other issues as I'm just learning svelte but it seems like SvelteKit and arcgis might not play well together...  Any advise would be greatly appreciated.

<script>
  import { onMount } from 'svelte'

  import Map from '@arcgis/core/Map'
  import MapView from '@arcgis/core/views/MapView'

  export let basemap = 'streets'
  export let center = [0, 0]

  let viewContainer

  onMount(async () => {
    const view = new MapView({
      container: viewContainer,
      map: new Map({
        basemap,
      }),
      center,
    })
  })
</script>

<h1>MapView</h1>
<div id="viewContainer" bind:this={viewContainer} />

<style>
  #viewContainer {
    width: 100%;
    height: 100%;
  }
</style>

This is a public GitHub repo for this project: https://github.com/sagewall/svelte-arcgis

[ColbyHemond]

@Sage have you found a solution for this yet? I'm running into the same issue.

[Sage]

@ColbyHemond  I haven't for a solution for the build error.  I just moved onto other things for the time being and was going to revisit this sometime in the future.  I'd really like to be able to use the ArcGIS API for JavaScript in a SvelteKit application though.  Svelte is quickly becoming one of my favorite things.

[Diesel]

I am also running into this issue. It appears that Vite and commonJS do not get along well, and that `@arcgis/core` imports a file that it thinks is commonJS. `/node_modules/@arcgis/core/widgets/support/componentsUtils.js` imports from `@esri/calcite-components/` where "type": "module" is not set in the package.json and specifically it references `@esri/calcite-components/dist/components/index.js` which is a stencilJs component. The stencilJS component's root index.js references ESM modules... but svelteKit/Vite seem to think the package is commonJS.

If you follow the error warning and change the import in `componentsUtils.js` to

    //import{setAssetPath as o}from"@esri/calcite-components/dist/components/index.js";
    import pkg from '@esri/calcite-components/dist/components/index.js';
    const o = pkg.setAssetPath;

it appears to work. However, you will run into further issues in `node_modules/@arcgis/core/widgets/support/chartUtils.js` importing from `@esri/calcite-colors`.

I'll post if I get it working...

I created a vite project based on https://odoe.net/blog/vite-jsapi and it works just fine.

[DimasPutra · Accepted solution]

Use dynamic imports in 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>

[Diesel]

Dynamic imports did work. Thank you!

Does the dynamic import remove tree-shaking from the imported `@arcgis` modules?

Also, do you think normal imports will work once the commonJS modules which `@arcgis` uses as dependencies are removed like a regular Svelte app? Or in SvelteKit will this always be the solution? Thank you again!

[Sage]

Thanks @DimasPutra!  

[Sage]

@DimasPutra @Diesel 

Does running `npm run build` work for you?

The dynamic imports seemed to have fixed any build issues on the dev server `npm run dev` for me. However, I've tried the production build command with a few different build adapters (static and netlify) and ended up with a new error regardless of the adapter used. I wonder if it's just me or if you all might see the same error when trying to run `npm run build`?

[vite-plugin-svelte-kit] Maximum call stack size exceeded
error during build:
RangeError: Maximum call stack size exceeded

If it's not something local to me, it may be related to this issue on SvelteKit about large dynamic imports: https://github.com/sveltejs/kit/issues/5399. 

[Sage]

Apparently my build error was related the the issue above because after the fix was merged and I installed the latest release with `npm install @sveltejs/kit@1.0.0-next.381` the production build worked both with the auto and static adaptors!!! 

[Diesel]

Yes it works for me, but with the async import the page is 338kB.