Sidebar Component Breaks with Remote Functions and Async Compiler Options #14901
Description
Describe the bug
Svelte 5 Sidebar Component Breaks with Remote Functions and Async Compiler Options
Description of the issue
When enabling remote functions and setting the Svelte compiler option for async to true, components that use context api and/or other complex prop use break. A good example of this is the sidebar component from the shadcn-svelte library stops functioning correctly. Specifically, hovering over menu items in the sidebar triggers console errors, and clicking on them does not navigate as expected.
Steps to reproduce the error
Steps for first installation (with all add ons i ussually use)
pnpm dlx sv create my-app
cd my-app
pnpm dlx shadcn-svelte@latest init
pnpm install
pnpm dlx shadcn-svelte@latest add sidebar-07
sidebar works ok.
changes on sidebar menu so that it goes to home
lib/components/ui/app-sidebar.svelte
items: [
{
title: "Home",
url: "/",
},
{
title: "Starred",
url: "#",
},
{
title: "Settings",
url: "#",
},
],
Sidebar works as expected, on hover over home, nothing special happens, on click it goes to home page. everythign else works fine.
Changes to enable remote functions
svelte.config.js
import { mdsvex } from 'mdsvex';
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: [vitePreprocess(), mdsvex()],
kit: { adapter: adapter(), experimental: {remoteFunctions: true} },
compilerOptions: { experimental: { async: true } },
extensions: ['.svelte', '.svx']
};
export default config;
On running the app with pnpm run dev everything seems to work ok, sidebar works as expected.
on hover over home, nothing special happens, no messages in console, but sidebar stops working.
turning off remote functions reverts to previous behavior. has no effect
turning off async in compiler options reverts to expected behavior and sidebar works.
package.json
{
"name": "my-app",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"format": "prettier --write .",
"lint": "prettier --check . && eslint .",
"test:unit": "vitest",
"test": "npm run test:unit -- --run && npm run test:e2e",
"test:e2e": "playwright test",
"db:push": "drizzle-kit push",
"db:generate": "drizzle-kit generate",
"db:migrate": "drizzle-kit migrate",
"db:studio": "drizzle-kit studio"
},
"devDependencies": {
"@eslint/compat": "^1.4.0",
"@eslint/js": "^9.38.0",
"@internationalized/date": "^3.8.1",
"@lucide/svelte": "^0.544.0",
"@playwright/test": "^1.56.1",
"@sveltejs/adapter-node": "^5.4.0",
"@sveltejs/kit": "^2.47.1",
"@sveltejs/vite-plugin-svelte": "^6.2.1",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.1.14",
"@types/node": "^22",
"@vitest/browser": "^3.2.4",
"bits-ui": "^2.11.0",
"clsx": "^2.1.1",
"drizzle-kit": "^0.31.5",
"drizzle-orm": "^0.44.6",
"eslint": "^9.38.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-svelte": "^3.12.4",
"globals": "^16.4.0",
"mdsvex": "^0.12.6",
"playwright": "^1.56.1",
"prettier": "^3.6.2",
"prettier-plugin-svelte": "^3.4.0",
"prettier-plugin-tailwindcss": "^0.7.1",
"svelte": "^5.41.0",
"svelte-check": "^4.3.3",
"tailwind-merge": "^3.3.1",
"tailwind-variants": "^3.1.1",
"tailwindcss": "^4.1.14",
"tw-animate-css": "^1.4.0",
"typescript": "^5.9.3",
"typescript-eslint": "^8.46.1",
"vite": "^7.1.10",
"vite-plugin-devtools-json": "^1.0.0",
"vitest": "^3.2.4",
"vitest-browser-svelte": "^1.1.0"
},
"dependencies": {
"postgres": "^3.4.7"
},
"pnpm": {
"onlyBuiltDependencies": [
"esbuild",
"@tailwindcss/oxide"
]
}
}
```
upgrade packages to latest versions has no effect, problem persists
> ncu -u
Using pnpm
Upgrading /usr/local/var/www/borrar/shadcn-svelte-remote-functions/my-app/package.json
[====================] 39/39 100%
@eslint/compat ^1.4.0 → ^1.4.1
@eslint/js ^9.38.0 → ^9.39.1
@internationalized/date ^3.8.1 → ^3.10.0
@lucide/svelte ^0.544.0 → ^0.553.0
@sveltejs/kit ^2.47.1 → ^2.48.4
@tailwindcss/vite ^4.1.14 → ^4.1.17
@types/node ^22 → ^24
@vitest/browser ^3.2.4 → ^4.0.7
bits-ui ^2.11.0 → ^2.14.2
drizzle-kit ^0.31.5 → ^0.31.6
drizzle-orm ^0.44.6 → ^0.44.7
eslint ^9.38.0 → ^9.39.1
eslint-plugin-svelte ^3.12.4 → ^3.13.0
globals ^16.4.0 → ^16.5.0
svelte ^5.41.0 → ^5.43.4
tailwindcss ^4.1.14 → ^4.1.17
typescript-eslint ^8.46.1 → ^8.46.3
vite ^7.1.10 → ^7.2.2
vitest ^3.2.4 → ^4.0.7
vitest-browser-svelte ^1.1.0 → ^2.0.1
this time, we d get console messages on hover over home, and sidebar stops working as before.
sidebar-07:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
sidebar-07:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
sidebar-07:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
sidebar-07:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
According to Ai Assitant:
Explanation
Understanding the problem
This error, "Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received," primarily occurs in Chrome Extensions when using message passing (e.g., chrome.runtime.sendMessage or chrome.tabs.sendMessage) and the message listener is expected to send an asynchronous response.
The core issue is that your message listener function returned true, which signals to Chrome that you intend to send a response asynchronously. However, the message channel (the connection between the sender and the listener) closed before your asynchronous response function (sendResponse) was actually called and executed. This often happens because:
Asynchronous Operation Delay: The asynchronous operation (e.g., a network request, a setTimeout, a promise resolution) that eventually calls sendResponse takes too long to complete, and the sending script's context (e.g., a content script on a page that navigates away) or the receiving script's context closes before the response is sent.
sendResponse Not Called: There's a code path where sendResponse is never explicitly called, even though true was returned.
Error in Asynchronous Code: An error might occur within the asynchronous code block, preventing sendResponse from being called.
### Reproduction
Steps for first installation (with all add ons i ussually use)
pnpm dlx sv create my-app
cd my-app
pnpm dlx shadcn-svelte@latest init
pnpm install
pnpm dlx shadcn-svelte@latest add sidebar-07
sidebar works ok.
changes on sidebar menu so that it goes to home
lib/components/ui/app-sidebar.svelte
items: [
{
title: "Home",
url: "/",
},
{
title: "Starred",
url: "#",
},
{
title: "Settings",
url: "#",
},
],
Sidebar works as expected, on hover over home, nothing special happens, on click it goes to home page. everythign else works fine.
Changes to enable remote functions
svelte.config.js
import { mdsvex } from 'mdsvex';
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: [vitePreprocess(), mdsvex()],
kit: { adapter: adapter(), experimental: {remoteFunctions: true} },
compilerOptions: { experimental: { async: true } },
extensions: ['.svelte', '.svx']
};
export default config;
On running the app with pnpm run dev everything seems to work ok, sidebar works as expected.
on hover over home, nothing special happens, no messages in console, but sidebar stops working.
turning off remote functions reverts to previous behavior. has no effect
turning off async in compiler options reverts to expected behavior and sidebar works.
### Logs
```Shell
sidebar-07:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
sidebar-07:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
sidebar-07:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
sidebar-07:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
`
According to Ai Assitant:
Explanation
Understanding the problem
This error, "Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received," primarily occurs in Chrome Extensions when using message passing (e.g., chrome.runtime.sendMessage or chrome.tabs.sendMessage) and the message listener is expected to send an asynchronous response.
The core issue is that your message listener function returned true, which signals to Chrome that you intend to send a response asynchronously. However, the message channel (the connection between the sender and the listener) closed before your asynchronous response function (sendResponse) was actually called and executed. This often happens because:
Asynchronous Operation Delay: The asynchronous operation (e.g., a network request, a setTimeout, a promise resolution) that eventually calls sendResponse takes too long to complete, and the sending script's context (e.g., a content script on a page that navigates away) or the receiving script's context closes before the response is sent.
sendResponse Not Called: There's a code path where sendResponse is never explicitly called, even though true was returned.
Error in Asynchronous Code: An error might occur within the asynchronous code block, preventing sendResponse from being called.
```
### System Info
```Shell
System:
OS: macOS 15.6.1
CPU: (10) arm64 Apple M1 Pro
Memory: 81.84 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 24.7.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /Users/jporre/.yarn/bin/yarn
npm: 11.5.1 - /opt/homebrew/bin/npm
pnpm: 10.1.0 - /opt/homebrew/bin/pnpm
bun: 1.3.0 - /Users/jporre/.bun/bin/bun
Watchman: 2025.05.26.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 142.0.7444.135
Firefox: 125.0.2
Safari: 18.6
npmPackages:
@sveltejs/adapter-node: ^5.4.0 => 5.4.0
@sveltejs/kit: ^2.48.4 => 2.48.4
@sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1
svelte: ^5.43.4 => 5.43.4
vite: ^7.2.2 => 7.2.2
```
### Severity
serious, but I can work around it
### Additional Information
https://github.com/user-attachments/assets/01e6b81a-c0a2-4ba6-b3c8-08ec6fb14e2c