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.

Issue importing @carbon/charts-svelte when using SvelteKit (possibly due to SSR)

See original GitHub issue

I am submitting a…

Feature request
Design defect
Source code defect
Demo/documentation defect
Other

charts version: 0.41.84

Issue description

Getting error this error when trying to import any type of chart into a SvelteKit page (.svelte file representing a route):

Importing binding name ‘default’ cannot be resolved by star export entries. moduleDeclarationInstantiation@[native code] link@[native code] link@[native code] link@[native code] link@[native code] link@[native code] link@[native code] link@[native code] link@[native code] link@[native code] link@[native code] link@[native code] linkAndEvaluateModule@[native code] [native code] promiseReactionJobWithoutPromise@[native code] promiseReactionJob@[native code]

The error occurs whether I use DonutChart in the template or not…

<svelte:head>
  <link rel="stylesheet" href="https://unpkg.com/@carbon/charts/styles.min.css" />
</svelte:head>

<script lang="ts">
  import { DonutChart } from '@carbon/charts-svelte'
</script>

<template>
  <DonutChart
        data={[
        {
          "group": "2V2N 9KYPM version 1",
          "value": 20000
        },
        {
          "group": "L22I P66EP L22I P66EP L22I P66EP",
          "value": 65000
        },
        {
          "group": "JQAI 2M4L1",
          "value": 75000
        },
        {
          "group": "J9DZ F37AP",
          "value": 1200
        },
        {
          "group": "YEL48 Q6XK YEL48",
          "value": 10000
        },
        {
          "group": "Misc",
          "value": 25000
        }
      ]}
        options={{
        "title": "Donut",
        "resizable": true,
        "donut": {
          "center": {
            "label": "Browsers"
          }
        },
        "height": "400px"
      }}
  />
</template>

Steps to produce the issue

npm init svelte@next my-app (pick SvelteKit demo app, TypeScript)
cd my-app
npm install --saveDev @carbon/charts @0.41.84 @carbon/charts-svelte @0.41.84 d3@5.14.2
Add import { DonutChart } from '@carbon/charts-svelte'; to the script tag in /src/routes/todos/index.svelte (note: not the script tag with context=“module”). Note: you don’t even have to have DonutChart in the template.
npm run dev – --open
Click TODOS at the top of the page