topic Re: Svelte Kit Build Error in ArcGIS JavaScript Maps SDK Questions

Svelte Kit Build Error

Sage — Wed, 08 Dec 2021 17:53:36 GMT

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.

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

Re: Svelte Kit Build Error

ColbyHemond — Wed, 23 Feb 2022 21:40:14 GMT

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

Re: Svelte Kit Build Error

Sage — Wed, 23 Feb 2022 23:03:56 GMT

@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.

Re: Svelte Kit Build Error

Diesel — Wed, 22 Jun 2022 02:50:49 GMT

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.

Re: Svelte Kit Build Error

DimasPutra — Tue, 19 Jul 2022 10:34:04 GMT

Use dynamic imports in the onMount block

Re: Svelte Kit Build Error

Diesel — Tue, 19 Jul 2022 15:02:47 GMT

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!

Re: Svelte Kit Build Error

Sage — Tue, 19 Jul 2022 15:54:05 GMT

Thanks @DimasPutra!

Re: Svelte Kit Build Error

Sage — Tue, 19 Jul 2022 19:14:23 GMT

@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.

Re: Svelte Kit Build Error

Sage — Tue, 19 Jul 2022 19:45:16 GMT

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!!!

Re: Svelte Kit Build Error

Diesel — Wed, 20 Jul 2022 14:09:39 GMT

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