state_descriptors_fixed occurs when object is enumerable, configurable and writable and has value
#15607
Labels
awaiting submitter
needs a reproduction, or clarification
Comments
|
Please provide a minimal reproduction, your whole project is not minimal and it would take us much more time than you to create a minimal one we can work on |
paoloricciuti
added
the
awaiting submitter
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import Chart, { registerables } from 'chart.js/auto';
import months from '../../stories/utils/months.js';
import type { ChartData, ChartOptions } from 'chart.js';
const type = 'bar';
const labels = months({ count: 7 });
const data: ChartData = $state({
labels: labels,
datasets: [
{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}
]
});
const options: ChartOptions = {
scales: {
y: {
beginAtZero: true
}
}
};
const updateMode = 'default';
let canvasRef: HTMLCanvasElement | null = $state(null);
let chart: Chart | null = null;
onMount(() => {
Chart.register(...registerables);
if (canvasRef) {
chart = new Chart(canvasRef, {
type,
data,
options
});
}
});
$effect(() => {
if (!chart) return;
chart.data = data;
Object.assign(chart.options, options);
chart.update(updateMode);
});
onDestroy(() => {
if (chart) chart.destroy();
chart = null;
});
</script>
<canvas bind:this={canvasRef}></canvas>
<style>
canvas {
max-width: 100%;
}
</style> |
|
The only case where I see |
Chart.js is defining properties on it when initialising...you can snapshot data to fix this issue <script lang="ts">
import { onMount, onDestroy } from 'svelte';
import Chart, { registerables } from 'chart.js/auto';
import months from '../../stories/utils/months.js';
import type { ChartData, ChartOptions } from 'chart.js';
const type = 'bar';
const labels = months({ count: 7 });
const data: ChartData = $state({
labels: labels,
datasets: [
{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}
]
});
const options: ChartOptions = {
scales: {
y: {
beginAtZero: true
}
}
};
const updateMode = 'default';
let canvasRef: HTMLCanvasElement | null = $state(null);
let chart: Chart | null = null;
onMount(() => {
Chart.register(...registerables);
if (canvasRef) {
chart = new Chart(canvasRef, {
type,
- data,
+ data: $state.snapshot(data),
options
});
}
});
$effect(() => {
if (!chart) return;
chart.data = data;
Object.assign(chart.options, options);
chart.update(updateMode);
});
onDestroy(() => {
if (chart) chart.destroy();
chart = null;
});
</script>
<canvas bind:this={canvasRef}></canvas>
<style>
canvas {
max-width: 100%;
}
</style>you might need to snapshot here and there in case you find this issue when updating. However pay attention because this code has a bug: $effect(() => {
if (!chart) return;
chart.data = data;
Object.assign(chart.options, options);
chart.update(updateMode);
});
|
|
Thank you! That solved the issue. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
I'm trying to make a wrapper for Chart.js. When there is data is passed as plain non-$state prop, it works fine. But when data is defined to be reactive with $state, the chart doesn't error due to the following error in the log section. This causes problem in Vitest and Storybook, making them unusable.
Reproduction
Clone https://github.com/sveltejs-labs/Chart.js and run
npm run devwith browser developer console opened. It will print the properties of data object and printLogs
System Info
System: OS: macOS 15.3.2 CPU: (8) arm64 Apple M2 Memory: 655.97 MB / 24.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.14.0 - ~/.local/state/fnm_multishells/75553_1742872528675/bin/node Yarn: 1.22.22 - ~/.local/state/fnm_multishells/75553_1742872528675/bin/yarn npm: 10.9.2 - ~/.local/state/fnm_multishells/75553_1742872528675/bin/npm bun: 1.2.5 - ~/.bun/bin/bun Browsers: Chrome: 134.0.6998.165 Safari: 18.3.1 npmPackages: svelte: ^5.25.3 => 5.25.3Severity
blocking all usage of svelte
The text was updated successfully, but these errors were encountered: