ESM package @arcgis/core import error

[EricKit]

Describe the bug

@arcgis/core is an NPM ESM package. I'm trying to figure out if this bug is with SvelteKit or if I need to contact ArcGis. @arcgis/core works fine with Vite and NextJS.

Importing from MapView from @arcgis/core creates the error below as this sandbox demonstrates

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';

At first I thought this issue had to do with Vite. So I imported @arcgis/core in vite as this tutorial shows. It works fine.

When I tried to debug further I realized calcite-components is a Stencil project which does include ESM, though the error states the package is CommonJS (it does not have "type": "module" in the package.json and the import is not from the esm folder). 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";

which produces 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.

A Vite project work just fine but SvelteKit reports calcite-colors does not have a named export only when it is imported via @arcgis/core.

Others have had this issue on the esri forums

Reproduction

Create a new SvelteKit project, run npm install @arcgis/core, then modify 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>

Logs

No response

System Info

System:
    OS: macOS 13.0
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 268.04 MB / 16.00 GB
    Shell: 3.3.1 - /usr/local/bin/fish
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Brave Browser: 103.1.40.105
    Chrome: 103.0.5060.53
    Firefox: 101.0.1
    Safari: 16.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.51
    @sveltejs/kit: next => 1.0.0-next.352
    svelte: ^3.48.0 => 3.48.0

Severity

blocking all usage of SvelteKit

Additional Information

No response

[bluwy]

@esri/calcite-colors only exports ESM via the module field in package.json, which isn't supported in nodejs hence the error came about. It works in a Vite project because (I'm assuming) you're testing it in client code, which Vite recognizes the module field. In Vite SSR, however module won't work to emulate nodejs.

It looks like @argis/core is a proper ESM package, but it's related deps @esri/calcite-components and @esri/calcite-components aren't:

• https://publint.bjornlu.com/@arcgis/[email protected]
• https://publint.bjornlu.com/@esri/[email protected]
• https://publint.bjornlu.com/@esri/[email protected]

[bluwy]

A temporary solution might be setting these packages into config.kit.vite.ssr.noExternal, though I'm not sure if that works.

[EricKit]

@bluwy thank you. I'll reach out to ArcGis, but as I understand it, their package is incompatible with SvelteKit at this time. I attempted noexternal on both @esri/calcite-components and @esri/calcite-colors to no effect. I also attempted noexternal with @arcgis/core which produces a new error from the file arcgis/core/config.js which states __vite_ssr_import_1__.deepMerge.slice is not a function

You are right also. I was using Vite and it does build successfully, but it was not Vite SSR

[bluwy]

Re __vite_ssr_import_1__.deepMerge.slice is not a function that may be a bug in Vite's SSR transfomation for HMR support but I can't quite tell as the bundle and source code are all minified. Or maybe it's a bug in @arcgis/core as presumably deepMerge should be a function itself.

[benmccann]

I've filed an issue for this in their repo: Esri/calcite-design-system#5077