Skip to content

Cannot use a store with the $ prefix with in:, out: or transition: #9518

@jzylks

Description

@jzylks

Describe the bug

In Svelte 4, you can wrap your transitions in a store and use that store in place of a transition from svelte/transition. In my case, I'm wrapping fly and fade with $accessibleFly to provide reduced motion transitions based on a (prefers-reduced-motion: reduce) media query. For instance:

{#if something}
  <div in:$accessibleFly={{x: 0, y: -200}}>Hello</div>
{/if}

The same code in Svelte 5 throws ReferenceError: $accessibleFly is not defined.

Reproduction

This is a working reproduction in Svelte 4

This does not work in Svelte 5

Logs

Error: $accessibleFly is not defined
message: "$accessibleFly is not defined"
stack: "ReferenceError: $accessibleFly is not defined\n" +
  " at eval (playground:output:2957:21)\n" +
  " at eval (playground:output:1364:6)\n" +
  " at execute_signal_fn (playground:output:1826:73)\n" +
  " at execute_effect (playground:output:1961:30)\n" +
  " at eval (playground:output:1316:9)\n" +
  " at execute_signal_fn (playground:output:1826:73)\n" +
  " at execute_effect (playground:output:1961:30)\n" +
  " at flush_queued_effects (playground:output:2006:7)\n" +
  " at process_microtask (playground:output:2025:3)"

System Info

N/A

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions