Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Multiple charts are undefined #1930

Open
1 of 6 tasks
SLAN14 opened this issue Dec 12, 2024 · 9 comments
Open
1 of 6 tasks

[Bug]: Multiple charts are undefined #1930

SLAN14 opened this issue Dec 12, 2024 · 9 comments

Comments

@SLAN14
Copy link

SLAN14 commented Dec 12, 2024

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
Copy link

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>

@nstuyvesant
Copy link
Contributor

@boydkelly and @SLAN14 - can either of you create a small repro on StackBlitz or Codesandbox and share it?

One of my projects is SvelteKit 2.15.1, Svelte 5.16.3 and @carbon/charts-svelte 1.22.8 and it's working without problems.

This is my vite.config.ts...

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
	build: {
		sourcemap: true
	},
	plugins: [sveltekit(), tailwindcss()],
	server: {
		port: 3000,
		fs: {
			allow: ['..', '/api/file/']
		}
	}
})

This is my svelte.config.js...

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

const production = process.env.NODE_ENV === 'production'

const baseCsp = [
	'self',
	'https://www.gstatic.com/recaptcha/', // recaptcha
	'https://accounts.google.com/gsi/', // sign-in w/google
	'https://www.google.com/maps/', // google maps
	'https://www.google.com/recaptcha/', // recapatcha
	'https://*.braintreegateway.com/', // credit card processing
	`https://*.braintree-api.com/`, // credit card processing

	// Less important
	'https://www.paypal.com/xoplatform/logger/api/logger', // braintree logging
]

if (!production) baseCsp.push('ws://localhost:3000')

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess({
		preserve: ['ld+json']
	}),
	kit: {
		adapter: adapter(),
		csp: {
			mode: 'auto',
			directives: {
				'default-src': [...baseCsp],
				'script-src': ['unsafe-inline', ...baseCsp],
				'img-src': ['data:', 'blob:', ...baseCsp],
				'style-src': ['unsafe-inline', ...baseCsp],
				'object-src': ['none'],
				'base-uri': ['self']
				// 'require-trusted-types-for': ["'script'"] // waiting for Firefox and Safari support
			}
		},
		files: {
			serviceWorker: 'src/service-worker.ts'
		}
	}
}

export default config

@nstuyvesant
Copy link
Contributor

Here are my devDependencies...

	"devDependencies": {
		"@carbon/charts-svelte": "^1.22.8",
		"@eslint/js": "^9.17.0",
		"@floating-ui/dom": "^1.6.12",
		"@playwright/test": "^1.49.1",
		"@sveltejs/adapter-node": "^5.2.11",
		"@sveltejs/kit": "^2.15.1",
		"@sveltejs/vite-plugin-svelte": "^5.0.3",
		"@tailwindcss/vite": "next",
		"@types/applepayjs": "^14.0.9",
		"@types/bootstrap": "^5.2.10",
		"@types/braintree": "^3.3.13",
		"@types/braintree-web": "^3.96.16",
		"@types/cookie": "^1.0.0",
		"@types/google.accounts": "^0.0.15",
		"@types/grecaptcha": "^3.0.9",
		"@types/gtag.js": "^0.0.20",
		"@types/jsonwebtoken": "^9.0.7",
		"@types/pg": "^8.11.10",
		"bootstrap": "~5.3.3",
		"braintree-web": "3.113.0",
		"date-picker-svelte": "^2.15.1",
		"eslint": "^9.17.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-prettier": "^5.2.1",
		"eslint-plugin-svelte": "^2.46.1",
		"globals": "^15.14.0",
		"google-auth-library": "^9.15.0",
		"prettier": "^3.4.2",
		"prettier-plugin-svelte": "^3.3.2",
		"prettier-plugin-tailwindcss": "^0.6.9",
		"sass": "^1.83.1",
		"svelte": "^5.16.3",
		"svelte-check": "^4.1.1",
		"tailwindcss": "next",
		"tslib": "^2.8.1",
		"typescript": "^5.7.2",
		"typescript-eslint": "^8.19.1",
		"vite": "^6.0.7",
		"vitest": "^2.1.8"
	}

@JinIgarashi
Copy link

I also have the same Uncaught ReferenceError: BaseChart is not defined after upgrading to 1.22.8 (v1.22.0 works fine)

LineChart is used at the below code.

https://github.com/UNDP-Data/geohub/blob/13aa269980243c9c84fb1d70afba1fd8cd8dcdd7/sites/geohub/src/routes/(map)/dashboards/electricity/components/Charts.svelte#L189

I have no idea why it does not work.

@boydkelly
Copy link

@boydkelly and @SLAN14 - can either of you create a small repro on StackBlitz or Codesandbox and share it?

One of my projects is SvelteKit 2.15.1, Svelte 5.16.3 and @carbon/charts-svelte 1.22.8 and it's working without problems.

This is my vite.config.ts...

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
build: {
sourcemap: true
},
plugins: [sveltekit(), tailwindcss()],
server: {
port: 3000,
fs: {
allow: ['..', '/api/file/']
}
}
})
This is my svelte.config.js...

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

const production = process.env.NODE_ENV === 'production'

const baseCsp = [
'self',
'https://www.gstatic.com/recaptcha/', // recaptcha
'https://accounts.google.com/gsi/', // sign-in w/google
'https://www.google.com/maps/', // google maps
'https://www.google.com/recaptcha/', // recapatcha
'https://*.braintreegateway.com/', // credit card processing
https://*.braintree-api.com/, // credit card processing

// Less important
'https://www.paypal.com/xoplatform/logger/api/logger', // braintree logging
]

if (!production) baseCsp.push('ws://localhost:3000')

/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess({
preserve: ['ld+json']
}),
kit: {
adapter: adapter(),
csp: {
mode: 'auto',
directives: {
'default-src': [...baseCsp],
'script-src': ['unsafe-inline', ...baseCsp],
'img-src': ['data:', 'blob:', ...baseCsp],
'style-src': ['unsafe-inline', ...baseCsp],
'object-src': ['none'],
'base-uri': ['self']
// 'require-trusted-types-for': ["'script'"] // waiting for Firefox and Safari support
}
},
files: {
serviceWorker: 'src/service-worker.ts'
}
}
}

export default config

hmmm. I don't know what i have done but the problem is now gone. I did for sure an npm upgrade, but also a lot of other stuff not at all related to these docs. And at some point it decided to build without this error. I'm really sorry not be be of more help right now. If I can figure out what was causing this I'll get back.

@nstuyvesant
Copy link
Contributor

@boydkelly - glad everything is working for you. I have run into some bugs in Svelte 5.x here and there and upgrading always solved them because they get fixed quickly.

One of the reasons I posted my devDependencies was that I wanted to see if you might have had a mismatch in versions between Svelte, SvelteKit and @sveltejs/vite-plugin-svelte.

@nstuyvesant
Copy link
Contributor

Hi @SLAN14 - if you upgrade all your dependencies/devDependencies, do you still see the problem?

@SLAN14
Copy link
Author

SLAN14 commented Jan 13, 2025

Hey @nstuyvesant - my codebases are at Svelte 4. So, does it mean that carbon-charts v1.22.0+ (except v1.22.0) doesn't work unless we've Svelte 5?

@nstuyvesant
Copy link
Contributor

HI @SLAN14 - It should not. This is why I'd like to see how you are building your Svelte project. If you can create a minimal repro, I'll be happy to take a look to see if I can help. Aside from that, svelte.config.js, vite.config.js/ts, package.json - that can also be helpful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 🕵️‍♀️ Triage
Development

No branches or pull requests

5 participants