Skip to content

Svelte 5 - $inspect rune breaking $state-reactivity #12806

Closed
@sebwib

Description

@sebwib

Describe the bug

In certain conditions, using $inspect will break reactivity of a component - making it no longer react to changes on a $state variable.

In our application we have a "hook-like" fetching system that is used by some components that can not be fed with data from the load-files (page.ts/layout.ts).
However, we want to make sure these components can still use the invalidate() logic of svelte, so we have created a small fetch-helper-hooklike-lib for this.

Using these "fetch-hooks" returns a class instance, with an internal property $state - that can then be updated later when fetching is complete or when it is invalidated.

These all works well and fine until we try to use $inspect on these internal $state-properties. The behaviour is very strange - the values seems to stop updating completely when inspected.

I have included a REPL that illustrates this issue. Try re-enabling the $inspect on line 16 of App.svelte to see how the app breaks.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE41W246kNhD9lYozDyARmEne-iZFSiIlSqQot30YRis3FI133AbZpntbLP8elY2B7umJ8oCE7apTp6qOLz2rhETDVs89U_yIbMW-b1uWMHtpaWBOKC2yhJmm0wXNbEyhRWt3ucqtOLaNttBDZ_Bvg9rAAJVujpCzNKvQFrVQh7ppXk3qgdJPJmfkSZ9EC6ZuzuT5A1oupIEtPBjLLUYVlwbjYNbDicsOVxTIRdnCQ4lanLCMQuwojte5Ch6qO3pGs2W6v0RRDNsd9I6C1Wg7rTxmKlEdbE0LQxwYPmBVYWGvvYpGmUZiKptDlLMQJ2fJFDOeUFRuswysvoDGb3hZCnUAWyM8CGVaLCxIoTABWwsDZyEl7DXyV2fC29a7B9uoG7E32dwCtamfdi7oapPVT7tc9V8jL-qxUNy4n4GQNu2up0EqymGTtburOer9ONtnBDCwhB2bUlQCS7ayusMhmSRyr7WzZj6ZpV4mjXzQwvK9xATO49-sFg-RGdtoJIFMTge0Lrsk_N1TWNWpwgRpKeqPBaFOXIqS28ZpoB_W89oB7c_zMmwh0uj5hj4DiAqir5Ygz8HmJfYWAPeXYTslGP3GbZ1qrsrm6OUJQL1QAKP27kOsc-X54mdXB0-bqj3xRtgCNxdV3CN_neBskBq09zjdksEo6rSc8SaLTsu05bYmHaRCFbIr0cz4PsF4ol9Ibgz8RG36A03bKIMe8KPbzvNu956otWvH1aQwvzbcbZybs2Fk7kO7QYkV76T9h7DXvsyucrorqAzL5QTmqo0p0iZMlzawvUWczCb-7xkEdNheUxy7f0DrT7QovqnwEv7Ll7eklihmQlH42V4nMjGkpeA0vNFUZ9C1hzYBGdFWSpaFTW4L6yYa9SP1KlezRujQ1WhaF_J83fT3Sr9sElQjj1HV1-ozbboUAp1Hodz6EsxGw5A5P3NhXUajlAAGKDhFiVDr-MYtqA-1Hnm5PV5BNGa7cJgq4IDWYXoIUSqhuJS3xJYZOA0HVq49Y9A3dw5ZjM1SptvD9j-2d7enq2GPkStmPOUxiusKEzzeXJt59y7OBCJ-_zia7vytxyWnIKfIQ06ntx_mjO6anI3D5xf3QwH_z2XjTvn3bpmJkuPzTHdbD6JcwVMChLOCnP3S1CpnQzIvfjsv_sk1r3M25OrlTaYhjZCpfwlkGVT8Fb1uaWKsGKn_d90chcHI9UaecPl-MGj_Ekdsupt3BQE44-mip7khge8eHx-nJ8Wde_ll-BeR3Y3vxgkAAA==

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 4.93 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
  Browsers:
    Chrome: 127.0.6533.100
    Safari: 17.5
  npmPackages:
    svelte: ^5.0.0-next.201 => 5.0.0-next.201

Severity

blocking an upgrade

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions