Hey everyone,
I'm building a SvelteKit application using node and vite.
If I try to import a calcite component like this:
import "@esri/calcite-components/dist/components/calcite-button";
I get this error:
Internal server error: Named export 'h' not found. The requested module '@stencil/core/internal/client/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 '@stencil/core/internal/client/index.js';
const { h } = pkg;
If I instead import it this way, it works:
import {onMount} from 'svelte';
onMount(async () => {await import('@esri/calcite-components/dist/components/calcite-button')})
I've encountered a similar error when working with the ESRI JS Maps SDK (similar to this thread: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/svelte-kit-build-error/td-p/11239...). But that thread doesn't explain the issue. It simply recommends loading the modules asynchronously on mount of the component. Sure, it's a decent workaround but what's going on?
It seems that there is some issue with ES modules being misinterpreted as common JS modules but I'm not sure where the issue lies exactly. Has any body encountered this issue and know what's going on?
For the time being, I've moved away from using calcite components because of unwanted behaviors like this.
