svelte

이것은 Svelte 5.57.2에 존재하는 반응성 버그입니다. 이벤트 핸들러에서 인스턴스화된 클래스나 모듈 레벨 스토어처럼 이펙트 외부에서 생성된 $derived의 경우, 부모 이펙트가 null이기 때문에 프록시의 has 트랩이 존재하지 않는 키를 추적하지 않았습니다. get 트랩은 항상 소스를 생성하므로 프로퍼티에 직접 접근하는 경우에는 정상적으로 동작했습니다.

이 문제는 누락된 키 추적 조건을 active_effect !== null에서 active_reaction !== null로 변경한 PR #18944에서 수정되었습니다. 해당 수정이 포함된 더 새로운 릴리스로, 가급적 최신 Svelte 5.x 버전으로 Svelte 5를 업그레이드하세요.

임시 해결 방법으로, in 또는 Object.hasOwn을 사용하기 전에 같은 derived 안에서 해당 프로퍼티를 직접 읽도록 강제하세요:

has_x = $derived((this.state.x, 'x' in this.state));
owns_y = $derived((this.state.y, Object.hasOwn(this.state, 'y')));

직접 읽기를 수행하면 반응형 프로퍼티 소스가 생성되므로, 나중에 x 또는 y가 추가될 때 해당 derived가 무효화됩니다.

let: 지시어는 자식 콘텐츠가 {#snippet children()}로 정의된 경우 동작하지 않습니다. let:value 선언이 무시되어 value가 undefined가 됩니다. let:value를 제거하고 대신 스니펫의 매개변수를 통해 값을 받으세요:

<Child>
  {#snippet children({ value })}
    Value is: {value}
  {/snippet}
</Child>

이 동작은 버전 5.1.0을 포함한 Svelte 5에서 발생합니다.

이 문제는 추적되지 않는 읽기 중에 Svelte가 하위 derived 값을 연결하기 때문에 발생합니다. derived는 reactions === null인 채로 CONNECTED 상태를 유지하고, page.data와 같이 수명이 긴 소스에 등록된 상태로 남아, 마운트 해제된 컴포넌트 컨텍스트와 DOM을 계속 보유할 수 있습니다. 이 문제는 Svelte 5.57.0에서 effect 내부의 untrack(() => get(snapshot)) 같은 패턴이나 onMount 내부에서의 모든 derived 읽기로 재현할 수 있습니다.

derived 연결 수정이 포함된 5.x 릴리스로 Svelte를 업그레이드하여 해결하세요:

npm install svelte@latest
# 또는
pnpm update svelte
# 또는
yarn upgrade svelte --latest

npm ls svelte로 설치된 버전을 확인하세요. 업그레이드 후에는 effect 루트가 파괴된 후 재현의 최종 source.reactions가 reaction을 유지하는 대신 undefined가 되어야 합니다.

임시 해결 방법으로는 복잡한 $derived 체인을 untrack()이나 onMount 내부에서만 읽는 것을 피하세요. 대신 해당 위치에서 원시 상태를 읽거나, derived가 일반적인 추적되는 반응형 컨텍스트에서 읽히도록 코드를 재구성하세요. 근본적인 수정은 활성 리더 자체가 연결되어 있을 때만 derived를 연결하는 Svelte 패치입니다.

이것은 알려진 Svelte 5 버그입니다(5.25.9에서 보고됨). 포커스된 요소가 {#if} 블록에 의해 제거되면, Svelte가 템플릿 이펙트를 실행하는 동안 브라우저가 focusout을 발생시키고, activeElement 바인딩이 해당 이펙트 실행 중에 상태를 업데이트하려고 시도합니다.

"don't throw state_unsafe_mutation when the focused element is removed with bind:activeElement" 수정이 포함된 최신 5.x 릴리스로 Svelte를 업그레이드하여 해결하세요:

npm install svelte@latest

그런 다음 개발 서버/빌드를 다시 시작하세요.

업그레이드할 수 없는 경우 임시 해결 방법: 요소를 제거하기 전에 blur 처리하세요:

<button
  onclick={(event) => {
    event.currentTarget.blur();
    showButton = false;
  }}
>
  hello
</button>

또는 requestAnimationFrame(() => (showButton = false))로 제거를 지연시키세요.

이것은 experimental.async: true에서 발생하는 Svelte 5.57.1 컴파일러 버그입니다. 프로덕션에서는 최상위 await 이후의 코드가 핸들러를 할당하기 전에 핸들러가 $.delegated() 또는 $.event()에 전달되므로 리스너가 undefined가 됩니다. 개발 빌드는 핸들러를 사용 시점에 읽기 때문에 정상적으로 작동합니다.

수정 사항은 PR #18933에 구현되어 있으며, 릴리스되면 Svelte를 업그레이드하세요. 그 전까지는 다음 임시 해결 방법 중 하나를 사용하세요:

1. 첫 번째 await 전에 핸들러를 생성하세요:

<script>
	const make = (name) => () => console.log(name);
	const onclick = make('click');

	await Promise.resolve();
</script>

<button {onclick}>click</button>

2. 이벤트가 발생할 때 핸들러가 읽히도록 인라인 화살표 함수로 감싸세요:

<button onclick={() => onclick()}>click</button>

다음 명령으로 프로덕션 결과를 확인하세요:

vite build && vite preview