Sveltekit typescript example does not work

[weaseldotro]

To reproduce, clone this repo and then:

cd sveltekit-typescript
npm i
npm run dev

When I go to http://localhost:3000/ the console shows the following error a few times:

10:52:28 AM [vite] Error when evaluating SSR module /src/routes/Basic.svelte:
/home/weasel/projects/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/@carbon/charts/interfaces/index.js:1
export * from './a11y';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at nodeRequire (/home/weasel/projects/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/vite/dist/node/chunks/dep-55830a1a.js:66473:17)
    at ssrImport (/home/weasel/projects/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/vite/dist/node/chunks/dep-55830a1a.js:66415:20)
    at eval (/src/routes/Basic.svelte:9:37)

The browser also shows this error.
If I refresh the browser, the error goes away and the charts are showed correctly in the browser.
If I remove the Basic and Events imports and components from index.svelte and leave only the DynamicImport, there are no errors.

The sveltekit example (without typescript) works fine, there are no errors.

If this not related to this repo but more of a problem with the main library https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte then I'm sorry for posting here and I can create the issue in that repo if you wish.

[benmccann]

It's the following two lines causing the issue:

carbon-charts-svelte-examples/sveltekit-typescript/src/routes/Basic.svelte

Line 3 in ae73a0d

import { ScaleTypes } from "@carbon/charts/interfaces";

carbon-charts-svelte-examples/sveltekit-typescript/src/routes/Events.svelte

Line 4 in ae73a0d

import { ScaleTypes } from "@carbon/charts/interfaces";

It's not valid to do an import from @carbon/charts/interfaces. You can only import from @carbon/charts unless @carbon/charts has an exports map which defines interfaces, which it doesn't.

The reason it's not valid is that the main points to UMD code and @carbon/charts/interfaces is only defined in the ESM code and you can't mix and match like that.

Probably @carbon/charts will need to be updated to either export ScaleTypes from the main entry point or add an exports map.

[metonym]

@benmccann Nice catch!

[metonym]

I've updated the sveltekit-typescript examples with the following workaround:

• import ScaleTypes as a type
• cast the scale type as as the ScaleTypes enum

<script lang="ts">
  import { BarChartSimple } from "@carbon/charts-svelte";
  import type { BarChartOptions, ScaleTypes } from "@carbon/charts/interfaces";

  const options: BarChartOptions = {
    title: "Simple bar (discrete)",
    height: "400px",
    axes: {
      left: { mapsTo: "value" },
      bottom: { mapsTo: "group", scaleType: "labels" as ScaleTypes.LABELS },
    },
  };
</script>

<BarChartSimple
  data={[
    { group: "Qty", value: 65000 },
    { group: "More", value: 29123 },
    { group: "Sold", value: 35213 },
    { group: "Restocking", value: 51213 },
    { group: "Misc", value: 16932 },
  ]}
  {options}
/>

[metonym]

Commenting for posterity in case anyone stumbles upon this.

I recently tried this again and the enums/interfaces seem to work perfectly (no more need for casting).

From the sveltekit-typescript example:

<script lang="ts">
  import { BarChartSimple, ScaleTypes, type BarChartOptions } from "@carbon/charts-svelte";

  const options: BarChartOptions = {
    title: "Simple bar (discrete)",
    height: "400px",
    axes: {
      left: { mapsTo: "value" },
      bottom: { mapsTo: "group", scaleType: ScaleTypes.LABELS },
    },
  };
</script>

<BarChartSimple
  data={[
    { group: "Qty", value: 65000 },
    { group: "More", value: 29123 },
    { group: "Sold", value: 35213 },
    { group: "Restocking", value: 51213 },
    { group: "Misc", value: 16932 },
  ]}
  {options}
/>