Web Components throw exception when imported in SvelteKit

[tay1orjones]

Discussed in https://github.com/carbon-design-system/carbon/discussions/16897

^{Originally posted by x80486 June 28, 2024} I'm working on a Svelte application. The issue I'm having is when I'm trying to integrate the Carbon Web Components module, not the Carbon Components Svelte.

I installed the module using npm install --save @carbon/web-components — and generated the SvelteKit application using the default method (npm create svelte@latest my-app).

However, I'm encountering the following error when I try to import any component:

$ npm run build 

> [email protected] build
> vite build

vite v5.3.2 building SSR bundle for production...
✓ 80 modules transformed.
vite v5.3.2 building for production...
✓ 118 modules transformed.
.svelte-kit/output/client/_app/version.json                             0.03 kB │ gzip:  0.05 kB
.svelte-kit/output/client/.vite/manifest.json                           2.25 kB │ gzip:  0.44 kB
.svelte-kit/output/client/_app/immutable/entry/start.D36IkT8m.js        0.07 kB │ gzip:  0.08 kB
.svelte-kit/output/client/_app/immutable/nodes/0.DNUig4dj.js            0.60 kB │ gzip:  0.39 kB
.svelte-kit/output/client/_app/immutable/nodes/1.D0XSSQx8.js            1.02 kB │ gzip:  0.59 kB
.svelte-kit/output/client/_app/immutable/chunks/scheduler.BvLojk_z.js   2.16 kB │ gzip:  1.02 kB
.svelte-kit/output/client/_app/immutable/chunks/index.DGQQB2Oz.js       5.43 kB │ gzip:  2.30 kB
.svelte-kit/output/client/_app/immutable/entry/app._lZ8z_tW.js          6.02 kB │ gzip:  2.44 kB
.svelte-kit/output/client/_app/immutable/chunks/entry.CvQOCXM1.js      27.42 kB │ gzip: 10.83 kB
.svelte-kit/output/client/_app/immutable/nodes/2.DodJWDZt.js           66.34 kB │ gzip: 16.48 kB
✓ built in 506ms
(node:945319) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

node:internal/event_target:1099
  process.nextTick(() => { throw err; });
                           ^
/home/me/my-app/node_modules/@carbon/web-components/es/components/accordion/index.js:10
import './accordion';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Object..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Function._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async Module.component (file:///home/me/my-app/.svelte-kit/output/server/nodes/2.js:5:59)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:825:20)
    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)

Node.js v20.13.1

I understand the nature of the error, but I'm almost sure I have everything configured correctly on my end. This is how I'm using/importing the components:

// +page.svelte

<script>
  import "@carbon/web-components/es/components/dropdown/dropdown.js";
  import "@carbon/web-components/es/components/dropdown/dropdown-item.js";
</script>

<cds-dropdown trigger-content="Select an item">
  <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
  <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
  <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
  <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
  <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
</cds-dropdown>

What else do I need to configure in the application to use ES modules with Carbon Design System components? Any help or pointers would be greatly appreciated.