{"record":{"id":"d9d189b137a8ee32","repo":"clockworklabs/SpacetimeDB","slug":"usespacetimedb-must-be-used-within-a-component-tha","errorCode":null,"errorMessage":"useSpacetimeDB must be used within a component that called createSpacetimeDBProvider. Did you forget to call `createSpacetimeDBProvider` in a parent component?","messagePattern":"useSpacetimeDB must be used within a component that called createSpacetimeDBProvider\\. Did you forget to call `createSpacetimeDBProvider` in a parent component\\?","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"crates/bindings-typescript/src/svelte/useSpacetimeDB.ts","lineNumber":15,"sourceCode":"import { getContext } from 'svelte';\nimport type { Writable } from 'svelte/store';\nimport {\n  SPACETIMEDB_CONTEXT_KEY,\n  type ConnectionState,\n} from './connection_state';\n\n// Throws an error if used outside of a SpacetimeDBProvider\nexport function useSpacetimeDB(): Writable<ConnectionState> {\n  const context = getContext<Writable<ConnectionState> | undefined>(\n    SPACETIMEDB_CONTEXT_KEY\n  );\n\n  if (!context) {\n    throw new Error(\n      'useSpacetimeDB must be used within a component that called createSpacetimeDBProvider. ' +\n        'Did you forget to call `createSpacetimeDBProvider` in a parent component?'\n    );\n  }\n\n  return context;\n}\n","sourceCodeStart":1,"sourceCodeEnd":23,"githubUrl":"https://github.com/clockworklabs/SpacetimeDB/blob/6dee26c6efc2856793e12b148a59742964f5d783/crates/bindings-typescript/src/svelte/useSpacetimeDB.ts#L1-L23","documentation":"The Svelte bindings use Svelte's context API: createSpacetimeDBProvider(builder) runs setContext(SPACETIMEDB_CONTEXT_KEY, store) during a component's initialization, and useSpacetimeDB() runs getContext(SPACETIMEDB_CONTEXT_KEY). When getContext returns undefined — no ancestor called createSpacetimeDBProvider, or the call happened outside synchronous component init — the hook throws.","triggerScenarios":"Calling useSpacetimeDB() (directly or via useTable/useReducer) in a Svelte component whose ancestors never called createSpacetimeDBProvider(builder); calling it from module scope, inside onMount, or after an await, since Svelte's getContext only works synchronously during component setup.","commonSituations":"SvelteKit apps where the provider was created in one +page.svelte but a sibling layout or another route needs it; calling the hook in a .svelte.ts module context; in Svelte 5, an await between component setup and createSpacetimeDBProvider invalidating the context; provider component created below the consumer.","solutions":["Call createSpacetimeDBProvider(builder) synchronously during the root component's initialization (e.g. +layout.svelte) so all descendants resolve the context","Keep no `await` between the start of component setup and the createSpacetimeDBProvider call","Only use the hooks in components rendered by (below) the component that created the provider","For SvelteKit, create the provider once in the root +layout.svelte, not per page"],"exampleFix":"<!-- before: +page.svelte -->\n<script lang=\"ts\">\n  import { useTable } from '@clockworklabs/spacetime-db-svelte';\n  const [rows] = useTable(tables.player); // throws\n</script>\n\n<!-- after: +layout.svelte -->\n<script lang=\"ts\">\n  import { createSpacetimeDBProvider } from '@clockworklabs/spacetime-db-svelte';\n  const db = createSpacetimeDBProvider(builder);\n</script>\n<slot /> <!-- all child pages now resolve the context -->","handlingStrategy":"validation","validationCode":"import { hasContext } from 'svelte';\nimport { SPACETIMEDB_CONTEXT_KEY } from './connection_state';\n\n// inside a component's script, before using hooks:\nif (!hasContext(SPACETIMEDB_CONTEXT_KEY)) {\n  throw new Error('createSpacetimeDBProvider must be called in a parent component first');\n}","typeGuard":null,"tryCatchPattern":"// Context errors surface at component init; guard with hasContext() instead of catching","preventionTips":["Create the provider synchronously at the top of the root layout's script","Never place an await between component init and createSpacetimeDBProvider","Keep getContext-based hooks inside component initialization only"],"tags":["svelte","context","provider","hooks","typescript"],"backgroundTag":"missing-context-provider","analyzedSha":"6dee26c6efc2856793e12b148a59742964f5d783","analyzedAt":"2026-08-20T06:08:37.179Z","contentChangedAt":"2026-08-20T06:08:37.179Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}