Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Named export not found. The requested module is a CommonJS module

See original GitHub issue

Describe the bug

I created a simple Svelte Kit app using npm create svelte@latest. I added some arcgis libraries and imported them on a svelte route. This results in the build failing:

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.

I retried the same thing on a regular svelte project (npm init vite@latest) and using that configuration, it works without any issues.

This might be related to Vite but since it works on the non-kit version, I figured it could be a kit-specific thing.

I also found a similar issue on Esri’s community: https://community.esri.com/t5/arcgis-api-for-javascript-questions/svelte-kit-build-error/td-p/1123928

Reproduction

Clone the following repo: https://github.com/georgeboot/svelte-kit-named-export-issue
Run npm install
Run npm run dev
Visit http://localhost:5173/arcgis
See error

Logs

CommonJS modules can always be imported via the default export, for example using:

import pkg from '@esri/calcite-components/dist/components/index.js';
const {setAssetPath: o}from"@esri/calcite-components/dist/components/index.js";import{getAssetUrl: s}from"../../assets.js";import"../../core/has.js";import{makeAbsolute: t}from"../../core/urlUtils.js";let e;function r(){o(t(s(e)))}e="components/assets";export{r: commitAssetPath} = pkg;


file:///Users/george/Sites/svelte-kit-named-export-issue/node_modules/@arcgis/core/widgets/support/componentsUtils.js:5
import{setAssetPath as o}from"@esri/calcite-components/dist/components/index.js";import{getAssetUrl as s}from"../../assets.js";import"../../core/has.js";import{makeAbsolute as t}from"../../core/urlUtils.js";let e;function r(){o(t(s(e)))}e="components/assets";export{r as commitAssetPath};
       ^^^^^^^^^^^^
SyntaxError: 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';
const {setAssetPath: o}from"@esri/calcite-components/dist/components/index.js";import{getAssetUrl: s}from"../../assets.js";import"../../core/has.js";import{makeAbsolute: t}from"../../core/urlUtils.js";let e;function r(){o(t(s(e)))}e="components/assets";export{r: commitAssetPath} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
    at async nodeImport (file:///Users/george/Sites/svelte-kit-named-export-issue/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:50457:21)
    at async eval (/src/routes/arcgis.svelte:7:31)
    at async instantiateModule (file:///Users/george/Sites/svelte-kit-named-export-issue/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:50386:9)

System Info

System:
  OS: macOS 12.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 1.28 GB / 32.00 GB
  Shell: 5.8.1 - /bin/zsh
Binaries:
  Node: 18.6.0 - /opt/homebrew/bin/node
  Yarn: 1.22.19 - /opt/homebrew/bin/yarn
  npm: 8.13.2 - /opt/homebrew/bin/npm
Browsers:
  Firefox Developer Edition: 104.0
  Safari: 15.6
npmPackages:
  @sveltejs/adapter-auto: next => 1.0.0-next.64
  @sveltejs/kit: next => 1.0.0-next.402
  svelte: ^3.46.0 => 3.49.0
  vite: ^3.0.0 => 3.0.4