Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
External $state() does't trigger the ` expession in non-runes component | GoodFirstPicks

External $state() does't trigger the `$` expession in non-runes component

sveltejs/svelte 1 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeSvelteTypeScript

Why this is a good first issue

Issue involves reactivity behavior differences between environments.

AI Summary

The issue describes a discrepancy where external $state() variables do not trigger reactivity in non-runes components in a Vite+Svelte project, despite working in the Svelte playground. The problem may relate to Svelte configuration or internal reactivity mechanisms. Further investigation into the project's Svelte configuration and reactivity handling is needed.

Issue Description

Describe the bug

Cannot use external $state() variable in non-runes components.

Strangely, the same code works in the Playground ($ is triggered): https://svelte.dev/playground/a1e421bd30b24f7b9f37da56351466a1?version=latest

But it doesn't work in pure vite+svelte project (no kit).

When using the non-runes syntax, the Counter is compiled into:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/router/Counter.svelte");import "/node_modules/.vite/deps/svelte_internal_disclose-version.js?v=847bedc6";
import "/node_modules/.vite/deps/svelte_internal_flags_legacy.js?v=847bedc6";
import "/node_modules/.vite/deps/svelte_internal_flags_async.js?v=847bedc6";

Counter[$.FILENAME] = 'src/router/Counter.svelte';

import * as $ from "/node_modules/.vite/deps/svelte_internal_client.js?v=847bedc6";
import { counter } from "/src/router/shared.svelte.ts";

var root = $.add_locations($.from_html(`<button> </button>`), Counter[$.FILENAME], [[8, 0]]);

function Counter($$anchor, $$props) {
	$.check_target(new.target);
	$.push($$props, false, Counter);

	$.legacy_pre_effect(() => (counter), () => {
		debugger;

		console.log(...$.log_if_contains_state('log', counter.count));
	});

	$.legacy_pre_effect_reset();

	var $$exports = { ...$.legacy_api() };

	$.init();

	var button = root();

	button.__click = () => counter.count++;

	var text = $.child(button);

	$.reset(button);
	$.template_effect(() => $.set_text(text, `clicks: ${($.deep_read_state(counter), $.untrack(() => counter.count)) ?? ''}`));
	$.append($$anchor, button);

	return $.pop($$exports);
}

if (import.meta.hot) {
	Counter = $.hmr(Counter, () => Counter[$.HMR].source);

	import.meta.hot.acceptExports(["default"],(module) => {
		module.default[$.HMR].source = Counter[$.HMR].source;
		$.set(Counter[$.HMR].source, module.default[$.HMR].original);
	});
}

export default Counter;

$.delegate(['click']);

If I replace the $ with $effec

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • requires understanding of Svelte internals
  • potential configuration issues
Loading labels...

Details

Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno