null exception if template markup and script contain remote functions

[tehnrd]

Describe the bug

There appears to be an problem when a page script tag contains a remote function and then you have another remote function directly in the markup.

It looks like the issue is in derived.js and has something to do with the boundary.

if (should_suspend) {
    boundary.update_pending_count(1);
    if (!pending) batch.increment(); //batch is null and error is thrown
}

I came across this issue trying to figure out a way to not pollute my template with verbose {await getData().property} syntax. If there is a better way to avoid putting await getData() everywhere in the template I think the docs should be updated with an example of a complex object returned with a remote function.

Reproduction

This repo has very simple setup to reproduce the issue. https://github.com/tehnrd/kit-remote-issues

Simply npm i, start that sveltekit app, then click the Page 1 link. (Ignore the await waterfall warning, I think that is a different issue as the script only has one await)

.remotes

import { query } from '$app/server';

export const getData = query(async () => {
	return {
		name: 'Page 1',
		description: 'This is page 1',
		content: 'Welcome to Page 1'
	};
});

export const getCount = query(async () => {
	return 1;
});

+page.svelte

<script lang="ts">
	import { getData, getCount } from './page.remote';

	// This is throwing an await_waterfall warning, but there is only one await here.
	// But maybe this is blocking the await in the template?
	let data = $derived(await getData());
</script>

{data.name} <br />
{data.description} <br />
{data.content} <br />

<!-- trying to avoid verbosity like below -->
<!-- 
{(await getData()).name} <br />
{(await getData()).description} <br />
{(await getData()).content} <br /> -->

count: {await getCount()} <br />

Logs

deriveds.js:139 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'increment')
    at deriveds.js:139:24
    at update_reaction (runtime.js:287:53)
    at update_effect (runtime.js:467:18)
    at create_effect (effects.js:125:4)
    at async_effect (effects.js:338:9)
    at async_derived (deriveds.js:118:2)
    at async.js:43:40
    at Array.map (<anonymous>)
    at flatten (async.js:43:20)
    at Module.template_effect (effects.js:355:2)

System Info

  System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 243.66 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.16.0 - ~/.nvm/versions/node/v22.16.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.16.0/bin/npm
    pnpm: 10.12.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 139.0.7258.66
    Safari: 18.5
  npmPackages:
    @sveltejs/adapter-auto: ^6.0.0 => 6.0.1 
    @sveltejs/kit: ^2.27.1 => 2.27.1 
    @sveltejs/vite-plugin-svelte: ^6.1.0 => 6.1.0 
    svelte: ^5.37.3 => 5.37.3 
    vite: ^7.0.4 => 7.0.6 

Severity

serious, but I can work around it

Additional Information

No response

[tehnrd]

Might need to rename the issue. It also fails if there are two remote functions in the script tag and none in the markup:

<script lang="ts">
	import { getData, getCount } from './page.remote';

	// Ignore the waterfall issue
	let data = $derived(await getData());
	let count = $derived(await getCount());
</script>

{data.name} <br />
{data.description} <br />
{data.content} <br />

<!-- trying to avoid verbosity like below -->
<!-- 
{(await getData()).name} <br />
{(await getData()).description} <br />
{(await getData()).content} <br /> -->

<!-- count: {await getCount()} <br /> -->
{count}

[dan-livingston]

I had a similar issue. I think the cause is that you have a <svelte:boundary> in the layout file. I fixed it by loading the data in a load file in pages and using <svelte:boundary> within page but not for the page itself.

[directormac]

My solution to this is isolating boundaries whenever the parent component has multiple or single await, and the child also has multiple and single await.

[tehnrd]

Ya, moving the svelte:boundary closer to the async calls resolved the issue.

But I still think this issue should be left open to resolve the issue or provide better error handling/messaging.

[jrmajor]

I think this is a bug in Svelte, not SvelteKit (see sveltejs/svelte#16596).