Issue involves reactivity behavior differences between environments.
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.
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
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!