lifecycle_outside_component Error with getContext with Svelte 5

[Thunberg087]

Bug: lifecycle_outside_component Error with getContext with Svelte 5

Description

When using the trpc-svelte-query-adapter with Svelte 5, I'm encountering a lifecycle_outside_component error related to getContext being called outside component initialization. This appears to happen when using the svelteQueryWrapper with a tRPC client.

Error Details

chunk-QB3HBZLJ.js?v=8af2f71a:689 Uncaught Svelte error: lifecycle_outside_component
`getContext(...)` can only be used during component initialisation
https://svelte.dev/e/lifecycle_outside_component
    at lifecycle_outside_component (http://localhost:5173/node_modules/.vite/deps/chunk-QB3HBZLJ.js?v=8af2f71a:689:19)
    at get_or_init_context_map (http://localhost:5173/node_modules/.vite/deps/chunk-QB3HBZLJ.js?v=8af2f71a:818:5)
    at getContext (http://localhost:5173/node_modules/.vite/deps/chunk-QB3HBZLJ.js?v=8af2f71a:731:23)
    at getQueryClientContext (http://localhost:5173/node_modules/.vite/deps/chunk-SNJR7YAC.js?v=8af2f71a:2840:18)
    at useQueryClient (http://localhost:5173/node_modules/.vite/deps/chunk-SNJR7YAC.js?v=8af2f71a:2871:10)
    at svelteQueryWrapper (http://localhost:5173/node_modules/.vite/deps/trpc-svelte-query-adapter.js?v=8af2f71a:960:39)
    at http://localhost:5173/src/lib/trpc/client.ts?t=1741865162741:21:21

Current setup

// src/lib/trpc/client.ts
const client = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: getUrl(),
      headers(opts) {
        const token = getAuthToken()
        return {
          Authorization: token ? 'Bearer ' + getAuthToken() : '',
        }
      },
    }),
  ],
})

export const trpc = svelteQueryWrapper<AppRouter>({ client })

// src/lib/components/QueryProvider.svelte
<script lang="ts">
  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
  import type { Snippet } from 'svelte'

  interface Props {
    children: Snippet
  }

  let { children }: Props = $props()

  const queryClient = new QueryClient()
</script>

<QueryClientProvider client={queryClient}>
  {@render children()}
</QueryClientProvider>

// src/App.svelte

<script lang="ts">
  import TrpcWrapper from '@/components/TrpcWrapper.svelte'
  import './app.css'
  import AppRouter from './lib/components/AppRouter.svelte'
</script>

<main class="w-full h-screen flex overflow-hidden">
  <TrpcWrapper>
    <AppRouter />
  </TrpcWrapper>
</main>

Am I missing something with the setup? Or is this package not compatible with Svelte 5?

Environment

• trpc-svelte-query-adapter version: 2.3.15
• @tanstack/svelte-query version: 5.62.3
• Svelte version: 5.2.7
• Node.js version: v20.13.1

[LargatSeif]

please is there any solution ?
i've already checked the #60 but still KO