[Bug]: Multiple charts are undefined

[SLAN14]

Relevant package(s)

• @carbon/charts
• @carbon/charts-svelte
• @carbon/charts-react
• @carbon/charts-angular
• @carbon/charts-vue
• Documentation website

Carbon Charts Version

1.22.3

Which bundler are you using?

Vite

What happened and what did you expect to happen?

Until version 1.22.0, npm run dev and npm run build worked fine with the given configurations.

But post 1.22.3 (unable to install 1.22.1 & 1.22.2 for some reason),
npm run dev result in ReferenceError: BaseChart is not defined
And npm run build results in the following output

Chart data and options (automatically formatted so no need for backticks)

<CirclePackChart
    data={data}
    options={{
      title: "XYZ",
      width: "max(22vw, 20rem)",
      toolbar: { enabled: false },
      canvasZoom: { enabled: true },
      legend: {
        enabled: true,
        position: "left",
        truncation: {
          type: "mid_line",
          threshold: 28,
          numCharacter: 32,
        },
      },
      data: { selectedGroups: col },
    }}
  />

JavaScript console or build output (if relevant)

 3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/AreaChart.svelte:7:0 'BaseChart' is not defined
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={AreaChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/AreaChart.svelte:9:8 'AreaChartCore' is not defined    
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={AreaChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BarChartGrouped.svelte:7:0 'BaseChart' is not defined  
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={GroupedBarChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BarChartGrouped.svelte:9:8 'GroupedBarChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={GroupedBarChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/AlluvialChart.svelte:7:0 'BaseChart' is not defined    
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={AlluvialChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/AlluvialChart.svelte:9:8 'AlluvialChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={AlluvialChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BarChartSimple.svelte:7:0 'BaseChart' is not defined   
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={SimpleBarChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BarChartSimple.svelte:9:8 'SimpleBarChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={SimpleBarChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BarChartStacked.svelte:7:0 'BaseChart' is not defined  
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={StackedBarChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BarChartStacked.svelte:9:8 'StackedBarChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={StackedBarChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BoxplotChart.svelte:7:0 'BaseChart' is not defined
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={BoxplotChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BoxplotChart.svelte:9:8 'BoxplotChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={BoxplotChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BubbleChart.svelte:7:0 'BaseChart' is not defined      
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={BubbleChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BubbleChart.svelte:9:8 'BubbleChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={BubbleChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BulletChart.svelte:7:0 'BaseChart' is not defined      
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={BulletChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/BulletChart.svelte:9:8 'BulletChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={BulletChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/ChoroplethChart.svelte:7:0 'BaseChart' is not defined
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={ChoroplethChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/ChoroplethChart.svelte:9:8 'ChoroplethChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={ChoroplethChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/CirclePackChart.svelte:7:0 'BaseChart' is not defined  
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={CirclePackChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/CirclePackChart.svelte:9:8 'CirclePackChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={CirclePackChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/ComboChart.svelte:7:0 'BaseChart' is not defined       
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={ComboChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/ComboChart.svelte:9:8 'ComboChartCore' is not defined  
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={ComboChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/DonutChart.svelte:7:0 'BaseChart' is not defined
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={DonutChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/DonutChart.svelte:9:8 'DonutChartCore' is not defined  
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={DonutChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/GaugeChart.svelte:7:0 'BaseChart' is not defined       
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={GaugeChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/GaugeChart.svelte:9:8 'GaugeChartCore' is not defined  
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={GaugeChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/HeatmapChart.svelte:7:0 'BaseChart' is not defined     
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={HeatmapChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/HeatmapChart.svelte:9:8 'HeatmapChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={HeatmapChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/HistogramChart.svelte:7:0 'BaseChart' is not defined   
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={HistogramChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/HistogramChart.svelte:9:8 'HistogramChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={HistogramChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/LineChart.svelte:7:0 'BaseChart' is not defined        
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={LineChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/LineChart.svelte:9:8 'LineChartCore' is not defined    
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={LineChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/LollipopChart.svelte:7:0 'BaseChart' is not defined    
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={LollipopChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/LollipopChart.svelte:9:8 'LollipopChartCore' is not defined
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={LollipopChartCore}
             ^
10:   {options}
11:   {data}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/MeterChart.svelte:7:0 'BaseChart' is not defined
 5: </script>
 6:
 7: <BaseChart
    ^
 8:   {...$$restProps}
 9:   Chart={MeterChartCore}
3:53:12 pm [vite-plugin-svelte] /node_modules/@carbon/charts-svelte/dist/MeterChart.svelte:9:8 'MeterChartCore' is not defined  
 7: <BaseChart
 8:   {...$$restProps}
 9:   Chart={MeterChartCore}
             ^
10:   {options}
11:   {data}

StackBlitz repro

No response

IBM Application/Team (if relevant)

No response

What priority level would this be in your opinion?

P2 (Medium)

[boydkelly]

I noticed after updating to svelte5 I am getting this error in wordcloud charts i had set up

 npm ls | grep carbon
├── @carbon/[email protected]
├── @carbon/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]

Build output:

ReferenceError: BaseChart is not defined
    at $$render_inner (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/WordCloudChart.js:13:5)
    at WordCloudChart (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/WordCloudChart.js:39:5)
    at _page (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/entries/pages/fr/docs/kodi-w100/_page.svelte.js:84:3)
    at children (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/internal.js:543:17)
    at slot (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/index3.js:273:5)
    at _layout (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/entries/pages/fr/docs/_layout.svelte.js:671:3)
    at children (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/internal.js:520:11)
    at slot (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/index3.js:273:5)
    at children (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/entries/pages/_layout.svelte.js:1400:19)
    at slot (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/index3.js:273:5)
    at Column (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/Row.js:75:5)
    at children (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/entries/pages/_layout.svelte.js:1395:15)
    at slot (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/index3.js:273:5)
    at Row (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/Row.js:195:5)
    at children (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/entries/pages/_layout.svelte.js:1392:11)
    at slot (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/index3.js:273:5)
    at Grid (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/Row.js:138:5)
    at children (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/entries/pages/_layout.svelte.js:1388:7)
    at slot (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/index3.js:273:5)
    at Content (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/entries/pages/_layout.svelte.js:1371:3)
    at _layout (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/entries/pages/_layout.svelte.js:1386:3)
    at Root (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/internal.js:512:5)
    at render (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/index3.js:138:3)
    at Function._render [as render] (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/chunks/internal.js:472:20)
    at render_response (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/index.js:1277:34)
    at async render_page (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/index.js:2123:12)
    at async resolve2 (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/index.js:2758:24)
    at async respond (file:///var/home/bkelly/dev/svelte/coastsystems.net/.svelte-kit/output/server/index.js:2650:22)
    at async visit (file:///var/home/bkelly/dev/svelte/coastsystems.net/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:227:20)
i18n test after page locale.set:  fr
lang:  fr
  500 /fr/docs/kodi-w100/ (linked from /fr/docs/)

+page.svelte (sorry its long)

<script>
  import { baseUrl } from '$lib/js/baseurl.store';
  import { DataTable } from 'carbon-components-svelte';
  import Head from '$lib/components/Head.svelte';
  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
  import { page } from '$app/stores';
  import { _, locale } from 'svelte-i18n';
  import CSLang from '$lib/components/CSLang.svelte';
  import { getAllLanguageLinks } from '$lib/js/metalang.js';
  const pathname = $page.url.pathname;
  const section = pathname.split('/')[2];
  const pageLang = pathname.split('/')[1];
  let pageUrl = $baseUrl + pathname;
  import { WordCloudChart } from '@carbon/charts-svelte';
  import '@carbon/charts-svelte/styles.css';
  import array from '/src/assets/metadata/w100-kodi.json';
  const data = array.xdxf.lexicon.ar;
  const rows = array.xdxf.lexicon.ar;
  console.log('i18n test b4 page locale.set: ', $_('locale'));
  locale.set(pageLang);
  console.log('i18n test after page locale.set: ', $_('locale'));
  let title = $_('kodi_w100.title');
  let author = $_('kodi_w100.author');
  let description = $_('kodi_w100.description');
  let keywords = $_('kodi_w100.keywords');
  let pageImage;
  let languageLinks = getAllLanguageLinks(pathname);
  const options = {
    toolbar: {
      enabled: true
    },
    legend: {
      enabled: false
    },
    color: {
      scale: {
        'group-10': '#08bdba', // Color for group 1
        'group-20': '#ee5396', // Color for group 4
        'group-30': '#78a9ff', // Color for group 3
        'group-40': '#3ddbd9', // Color for group 2
        'group-50': '#ff7eb6' // Color for group 6
        // 'group-60': '#33b1ff', // Color for group 5
        // 'group-70': '#be95ff', // Color for group 8
        // 'group-80': '#42be65', // Color for group 7
        // 'group-90': '#82cfff' // Color for group 9
      }
    },
    data: {
      groupMapsTo: 'value'
    },
    animations: true,
    wordCloud: {
      wordMapsTo: 'dyu',
      fontSizeMapsTo: 'freq',
      fontSizeRange: (chartSize, data) => {
        return [12, 80]; // This is just an example range
      },
      transformFontSize: (value) => {
        // Example transformation to increase variation
        return Math.log(value + 1) * 10; // Adjust factor as needed
      }
    },
    resizable: true,
    height: '400px'
  };
  console.log('lang: ', $_('locale'));
</script>

<Head {pageUrl} {title} {author} {description} {keywords} {pageImage} {pageLang} />
<Breadcrumbs {pageUrl} {title} {description} {pageImage} {pageLang} {section} />
<CSLang {languageLinks} {pageLang} />

<h2>
  {title}
</h2>
<WordCloudChart {data} {options} />

<DataTable
  batchExpansion
  zebra
  sortable
  nonExpandableRowIds={rows.filter((row) => row.ex.orig == '').map((row) => row.id)}
  headers={[
    { key: 'freq', value: $_('Frequency') },
    { key: 'dyu', value: $_('Dyula') },
    { key: 'gr', value: $_('pos'), sort: false },
    { key: 'fr', value: $_('French') },
    { key: 'ex.orig', value: $_('Usage') }
  ]}
  {rows}
>
  <span slot="description" style="font-size: 1rem">
    {description}
  </span>
  <svelte:fragment slot="expanded-row" let:row>
    {row.ex.trans}
  </svelte:fragment>
</DataTable>