How is my value "non-reactive"?

[rempas]

Hello people! I'm new and trying to learn Svelte! I have read most of the tutorial, and I'm now trying to make a color picker app that supports different color spaces.

One of the problems I face is getting an error (or warning?) that says:

[svelte] binding_property_non_reactive
`bind:value={sliders[slider_name]}` (src/components/Slider.svelte:15:37) is binding to a non-reactive property
https://svelte.dev/e/binding_property_non_reactive

But how can the value be "non-reactive", when I used $state for it?

The source code for my example, is here (notice that it's the dev branch). You can see the three files inside the src/components directory to see what's going on.

[geodask]

Hello! I've taken a look at your color picker app code and can explain why you're getting the "binding_property_non_reactive" error.

Why This Happens

Your current approach has two main issues:

• You can't export values inside the default <script> tag from .svelte files. If you need to export a value, you should do it from the <script module> tag. More info here: https://svelte.dev/docs/svelte/svelte-files#script-module
• You're trying to share state across components incorrectly.

Here is how I would approach this if have understood correctly what you want to achieve:

1. Update Your Slider.svelte

<script lang="ts">
  // Accept a direct sliderValue instead of accessing the sliders object.
  // It should be a bindable prop for the parent to bind to.
  let { name, max, sliderValue = $bindable() } = $props();
</script>

<input id="{name}_slider" type="range" min="0" max={max} bind:value={sliderValue} />
<input type="number" min="0" max={max} value={sliderValue} />

2. Update Your Space.svelte

<script lang="ts">
  import Slider from '$comp/Slider.svelte';

  // Accept props from parent component
  // If you want the parent to bind to the values as well, use $bindable() again
  let { name, max1, max2, max3, value1 = $bindable(), value2 = $bindable(), value3 = $bindable() } = $props();
</script>

<div>
  <Slider {name} max={max1} bind:sliderValue={value1} />
  <Slider {name} max={max2} bind:sliderValue={value2} />
  <Slider {name} max={max3} bind:sliderValue={value3} />
</div>

3. Update Your ColorSpaces.svelte

<script lang="ts">
  import Space from '$comp/Space.svelte';

  // Keep your state object
  const sliders = $state({
    rgb1: 0,
    rgb2: 0,
    rgb3: 0,
    hsv1: 0,
    hsv2: 0,
    hsv3: 0,
  });

  const rgb_props = {
    name: "rgb",
    max1: 255,
    max2: 255,
    max3: 255,
  };

  const hsv_props = {
    name: "hsv",
    max1: 355,
    max2: 100,
    max3: 100,
  };

  $effect(() => {
    if (sliders.rgb1) {
      console.log("rgb1 changed to", sliders.rgb1);
    }
    // ...other effects
  });
</script>

<div id="ColorSliders">
  <Space {...rgb_props}
         bind:value1={sliders.rgb1}
         bind:value2={sliders.rgb2}
         bind:value3={sliders.rgb3} />
  <Space {...hsv_props}
         bind:value1={sliders.hsv1}
         bind:value2={sliders.hsv2}
         bind:value3={sliders.hsv3} />
</div>

The Key Insight

Svelte's reactivity system works best when:

• State lives in the parent component and flows down via props
• Child components receive bindable props when they need to modify parent state

This solution maintains the same functionality but properly preserves reactivity throughout your component hierarchy by keeping a clean data flow.

Further Improvements

If you want to share state across multiple components, you have several options:

1. The new recommended approach in Svelte 5 is to declare $state in .svelte.js or .svelte.ts files that you can the import in multiple components
2. Use Svelte stores - The traditional approach from Svelte 4 and earlier: https://svelte.dev/docs/svelte/stores
3. Use context API - For passing data down through the component tree without props: https://svelte.dev/docs/svelte/context

The first approach aligns best with Svelte's runes system and is generally recommended for new projects.

Hope this helps solve your "non-reactive" binding error! Let me know if you need any clarification.

[rempas]

Oh my goooooood! The excitement!!!! Thank you so so so so much! By the time I was seriously going back to give freelancing a shot, this comes like Deus ex machina!

I read and understood everything! It does indeed work as I need it now (almost, $effect won't do what I need it to do). Just for comparison and demonstration purposes, I added this commit to the tree.

Now, following your first rule, I added the sliders in a .svelte.ts file and I changed it even further. And this time, $effect, works better and the code is more clean! This latest commit is the latest version I have (only new file is inside the src/lib directory).

Now... There are some more questions (if you don't mind, of course). While the code builds and runs without problems, the svelte server in my text editor gives some errors which I would like to ask and understand as, I'm not the kind of person who ignores things and hope nothing breaks in the future.

First. When I try to import sliders.svelte.ts inside Slider.svelte (second line), I get the error: An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled. ts (5097) [2, 44]. I read the TS docs but it has something to do with the runtime mapping TS files when converting to JS files. I don't know, I didn't really understand it...

Second, every time I try to access a slider, I get the following error: Element implicitly has an 'any' type because type 'Map<string, number>' has no index signature. Did you mean to call 'sliders.get'? ts (7052).

[geodask]

Hello! I am glad I could help!

To address your questions:

1. .ts Extension Error

The error occurs because TypeScript does not allow importing modules with .ts or .tsx extensions in the compiled JavaScript output. TypeScript is a compile-time tool that transpiles .ts files into JavaScript, and only the compiled JavaScript exists at runtime. To resolve this, omit the .ts extension in your imports. The build system (e.g., Vite or Webpack) will automatically resolve the correct file based on its configuration.

2. "Element implicitly has an 'any' type" Error

This error occurs when accessing a property on a Map using bracket notation (e.g., sliders[slider]). The issue arises because the variable is declared as a Map but then used as a plain object.

• Option 1: Use an Object with Type Safety
  Define an interface for the sliders and use Svelte's $state for reactivity. Restrict the slider parameter to a key of the Sliders interface to ensure type safety.

interface Sliders {
  rgb1: number;
  rgb2: number;
  rgb3: number;
  hsv1: number;
  hsv2: number;
  hsv3: number;
}

export const sliders: Sliders = $state({
  rgb1: 0,
  rgb2: 0,
  rgb3: 0,
  hsv1: 0,
  hsv2: 0,
  hsv3: 0,
});

export function updateSliders(slider: keyof Sliders) {
  console.log(`"${slider}" changed to: ${sliders[slider]}`);
  // ... additional logic
}

• Option2: Use Svelte's reactive SvelteMap
  If you prefer using a Map for key-value storage, useSvelteMap from 'svelte/reactivity' for reactivity and type safety. SvelteMap is designed for reactive key-value pairs in Svelte and provides methods like get, set, and has. Example:

import { SvelteMap } from 'svelte/reactivity';

export const sliders = new SvelteMap<string, number>([
  ['rgb1', 0],
  ['rgb2', 0],
  ['rgb3', 0],
  ['hsv1', 0],
  ['hsv2', 0],
  ['hsv3', 0],
]);

export function update_sliders(slider: string) {
  console.log(`"${slider}" changed to: ${sliders.get(slider)}`);
  // ... additional logic
}

For more details on SvelteMap, see: https://svelte.dev/docs/svelte/svelte-reactivity#SvelteMap

[rempas]

SvelteMap seems cool and doesn't require me to have to export the "Sliders" type (and neither create it). It does however not seem to work with bind:value. I tried both .get and .set and nothing works.

[geodask]

You can use function binding for this: https://svelte.dev/docs/svelte/bind#Function-bindings

<input bind:value={() => map.get(key), (value) => map.set(key, value)}/>

[rempas]

OMG, I love you guyyyys!!!! Thank you all so much! Now I can finally work!!!