Web Components throw exception when imported in SvelteKit

[tay1orjones]

Discussed in carbon-design-system/carbon#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.

[andy-blum]

@tay1orjones

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

Have you tried setting type: "module" in your sveltekit app's package.json? Are you able to use import "..." successfully on anything other than @carbon/web-components?

[mochams]

Also facing the same issue.

error

Cannot use import statement outside a module
.../node_modules/@carbon/web-components/es/components/dropdown/index.js:10
import './dropdown';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24

+page.svelte

<script>
	import '@carbon/web-components/es/components/dropdown/index.js';
</script>

<cds-dropdown value="bar">
	<cds-dropdown-item value="foo">Foo</cds-dropdown-item>
	<cds-dropdown-item value="bar">Bar</cds-dropdown-item>
	<cds-dropdown-item value="baz">Baz</cds-dropdown-item>
</cds-dropdown>

package.json

{
	"name": "...",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
		"test": "vitest",
		"lint": "prettier --check . && eslint .",
		"format": "prettier --write ."
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"@tailwindcss/forms": "^0.5.7",
		"@types/eslint": "^9.6.0",
		"autoprefixer": "^10.4.20",
		"daisyui": "^4.12.10",
		"eslint": "^9.0.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-svelte": "^2.36.0",
		"globals": "^15.0.0",
		"postcss": "^8.4.41",
		"prettier": "^3.1.1",
		"prettier-plugin-svelte": "^3.1.2",
		"svelte": "^5.0.0-next.1",
		"svelte-check": "^3.6.0",
		"tailwindcss": "^3.4.9",
		"typescript": "^5.0.0",
		"vite": "^5.0.3",
		"vitest": "^2.0.0"
	},
	"type": "module",
	"dependencies": {
		"@carbon/web-components": "^2.11.1"
	}
}

svelte config

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	},
	preprocess: vitePreprocess()
};

export default config;

vite config

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],
	test: {
		include: ['tests/**/*.{test,spec}.{js,ts}']
	}
});

[andy-blum]

I don't think this is an issue with this repository, but rather with how your application is resolving "@carbon/web-components/es/components/dropdown/index.js". If I modify that to a relative URL it works

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

<cds-dropdown value="bar">
  <cds-dropdown-item value="foo">Foo</cds-dropdown-item>
  <cds-dropdown-item value="bar">Bar</cds-dropdown-item>
  <cds-dropdown-item value="baz">Baz</cds-dropdown-item>
</cds-dropdown>

[andy-blum]

Seems like adding the "alias" key to your svelte config could simplify this process as well.

const config = {
	kit: {
		adapter: adapter(),
		alias: {
			"@carbon": "./node_modules/@carbon"
		}
	},
	preprocess: vitePreprocess()
};

export default config;

[mochams]

Thank you @andy-blum