Issue importing @carbon/charts-svelte when using SvelteKit (possibly due to SSR)
See original GitHub issueI 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
Current behavior
Error appears
Expected behavior
No error
Screenshot or recording
Following the steps will reproduce this issue
I suspect @carbon.charts may not be compatible with server-side rendering in its present state.
Issue Analytics
- State:
- Created 2 years ago
- Comments:16 (10 by maintainers)
Confirmed on my end as well. Thanks for the amazingly fast response!
Upgrading to
@carbon/charts
version 0.41.86 fixes the SSR issue for me.