Svelte 5: Building an app fail when creating stores using let name = $derived()

[JLAcostaEC]

Describe the bug

Using let name = $derived() on a custom store store.svelte.ts file. Will break the build process getting a practically useless message to correct the problem.

RollupError: The left-hand side of an assignment expression must be a variable or a property access

Read reproduction...

Reproduction

Let's create a rune store to easily get the supabase client in any app component:

import { getContext, hasContext, setContext } from 'svelte';
import type { SupabaseClient } from '@supabase/supabase-js';
import type { Database } from '../types/database.types';

export default function createSupabaseClientStore(initial: SupabaseClient<Database>) {
	const context = 'supabaseClient';
	if (hasContext(context)) {
		return getContext<{ client: SupabaseClient<Database> }>(context);
	}
        // Here we accidentaly use $derived() instead $state() 😮‍💨 
        let client = $derived(initial);
	// let client = $state(initial);   <--- Fix
	const state = {
		get client() {
			return client;
		},
		set client(value) {
			client = value;
		}
	};
	const clientContext = setContext(context, state);
	return clientContext;
}

(Don't get me wrong, the problem is not the $derived, i think 😵‍💫 )

Now let's run it (We will pretend that this store is being used in various parts of the app), so...

pnpm run dev or npm run dev

Running this store in dev mode everything works. But if you try to build it pnpm run build or npm run build you will get:

RollupError: The left-hand side of an assignment expression must be a variable or a property access

As you can see, the error does not mention any files in the repository, the linter also did not mention anything at all. After 3 days of debug I could see that the problem was that store using $derived() instead of $state.

I think a better error message should alert you at this point.

If you change the above code to use $state, the app build without problems.

---

UPDATE:

Repos:
https://github.com/JLAcostaEC/runes-ts

https://github.com/JLAcostaEC/runes-js

---

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
    Memory: 17.10 GB / 31.37 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.5 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: 5.0.0-next.113 => 5.0.0-next.113

Severity

annoyance

[Conduitry]

Can you provide an actual complete reproduction in the REPL please? When I try to compile that component, I'm getting a compile-time error from Svelte (not an error from Rollup) about client = value being invalid because you are assigning to derived state.

[JLAcostaEC]

Hi @Conduitry

I already tried the RELP before, and it does mark it as an error. Basically this happens on local projects, maybe a linter or TS conflict? I don't know.

Can you try with a demo project using TS?

I have all extensions installed and updated. Yesterday I wrote to the discord server requesting that someone try to compile the example to avoid opening an issue here, but there was no one to help me.

[Conduitry]

If you can't reproduce it in the REPL, a repository to clone that's a minimal reproduction will also work.

[JLAcostaEC]

If you can't reproduce it in the REPL, a repository to clone that's a minimal reproduction will also work.

Sorry for waiting,

I was just creating the repositories and wanted to try using version 114, but now I'm getting the following error:

 Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/src/lib/store.svelte.ts"
|- TypeError: Cannot read properties of undefined (reading 'runes')

I have not changed anything in the code, I have only updated to v114

I have blocked the version at 113 to make the repositories.

Repos:
https://github.com/JLAcostaEC/runes-ts

https://github.com/JLAcostaEC/runes-js

Just clone it and run/build it. Dev mode works, build no.

[brunnerh]

Regarding the error, see this issue:

• Svelte 5: Preview REPL state.analysis undefined? #11306

The fix is implemented and deployed to the REPL but has not been published in @next it seems.

[JLAcostaEC]

Regarding the error, see this issue:

• Svelte 5: Preview REPL state.analysis undefined? #11306

The fix is implemented and deployed to the REPL but has not been published in @next it seems.

Maybe we need another issue for that... 🤔

[JLAcostaEC]

Hi @Conduitry have you been able to verify this issue? Or do you need something else I can contribute?