sveltejs/svelte · error · Error

Cannot interpolate values of different type

Error message

Cannot interpolate values of different type

What it means

`tweened()` interpolates between current value `a` and target `b`. Its `get_interpolator` requires both ends to share the same `typeof`, and arrays must match arrays. A type mismatch (number to string, object to array) is unrecoverable, so it throws. Dates, numbers, arrays, and objects are supported; mismatched types are not.

Source

Thrown at packages/svelte/src/motion/tweened.js:24

import { linear } from '../easing/index.js';
import { is_date } from './utils.js';
import { set, state } from '../internal/client/reactivity/sources.js';
import { tag } from '../internal/client/dev/tracing.js';
import { get, render_effect } from 'svelte/internal/client';
import { DEV } from 'esm-env';

/**
 * @template T
 * @param {T} a
 * @param {T} b
 * @returns {(t: number) => T}
 */
function get_interpolator(a, b) {
	if (a === b || a !== a) return () => a;

	const type = typeof a;
	if (type !== typeof b || Array.isArray(a) !== Array.isArray(b)) {
		throw new Error('Cannot interpolate values of different type');
	}

	if (Array.isArray(a)) {
		const arr = /** @type {Array<any>} */ (b).map((bi, i) => {
			return get_interpolator(/** @type {Array<any>} */ (a)[i], bi);
		});

		// @ts-ignore
		return (t) => arr.map((fn) => fn(t));
	}

	if (type === 'object') {
		if (!a || !b) {
			throw new Error('Object cannot be null');
		}

		if (is_date(a) && is_date(b)) {
			const an = a.getTime();

View on GitHub (pinned to 20b341f100)

Solutions

1. Ensure `.set()` receives the same type as the current value.
2. Coerce before setting: `store.set(Number(value))`.
3. For intentionally different end states, reset without interpolating: `.set(value, { duration: 0 })` or `hard: true`.

Example fix

// before
const t = tweened(0);
t.set('100'); // number -> string -> throws
// after
t.set(Number('100')); // both numbers
// or snap without interpolation
t.set(100, { duration: 0 });

function sameTweenType(a, b) {
	return typeof a === typeof b && Array.isArray(a) === Array.isArray(b);
}
if (!sameTweenType(current, next)) throw new Error('Tween source and target must match type');

function sameTweenType(a, b) {
	return typeof a === typeof b && Array.isArray(a) === Array.isArray(b);
}

When it happens

Trigger: Calling `tweenedStore.set(newValue)` where `newValue`'s type differs from the current value — e.g. tweening from `0` to `"100"` (number to string), or from `[1,2]` to `{x:1}` (array to object).

Common situations: Unvalidated API data feeding a tweened store; loose typing where a number arrives as a string; changing the data shape between updates.

Related errors

• Object cannot be null
• Cannot spring ${typeof current_value} values

AI-assisted analysis of sveltejs/svelte@20b341f100 (2026-08-12). Data as JSON: /api/errors/b5fd866d8dcf80f0. Report an issue: GitHub.