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