{"record":{"id":"76da741c48e13792","repo":"sveltejs/svelte","slug":"hydratable-missing-but-required","errorCode":"hydratable_missing_but_required","errorMessage":"hydratable_missing_but_required\nExpected to find a hydratable with key `${key}` during hydration, but did not.\nhttps://svelte.dev/e/hydratable_missing_but_required","messagePattern":"hydratable_missing_but_required\nExpected to find a hydratable with key `(.+?)` during hydration, but did not\\.\nhttps://svelte\\.dev/e/hydratable_missing_but_required","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/svelte/src/internal/client/errors.js","lineNumber":328,"sourceCode":"\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/get_abort_signal_outside_reaction`);\n\t}\n}\n\n/**\n * Expected to find a hydratable with key `%key%` during hydration, but did not.\n * @param {string} key\n * @returns {never}\n */\nexport function hydratable_missing_but_required(key) {\n\tif (DEV) {\n\t\tconst error = new Error(`hydratable_missing_but_required\\nExpected to find a hydratable with key \\`${key}\\` during hydration, but did not.\\nhttps://svelte.dev/e/hydratable_missing_but_required`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/hydratable_missing_but_required`);\n\t}\n}\n\n/**\n * Failed to hydrate the application\n * @returns {never}\n */\nexport function hydration_failed() {\n\tif (DEV) {\n\t\tconst error = new Error(`hydration_failed\\nFailed to hydrate the application\\nhttps://svelte.dev/e/hydration_failed`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/hydration_failed`);\n\t}\n}","sourceCodeStart":310,"sourceCodeEnd":346,"githubUrl":"https://github.com/sveltejs/svelte/blob/20b341f10048cf1016a2028ac7eee5595cfef6a5/packages/svelte/src/internal/client/errors.js#L310-L346","documentation":"Thrown at internal/client/hydratable.js:26 during hydration when a hydratable(key, fn) call cannot find `key` in the server-provided data store (window.__svelte.h). In DEV this is a hard error because a missing required hydratable means the server and client disagree on what should be serialised; in production it downgrades to a warning.","triggerScenarios":"A component uses hydratable() to claim pre-serialised server data, but the server render did not emit that key (different code path, conditional render mismatch, or the data was never set). hydrating is true and store.has(key) is false.","commonSituations":"SSR and client use different component versions; conditional rendering means the server skipped a subtree but the client tries to hydrate it; key typo between server write and client read; async streaming boundaries where data wasn't flushed; enabling hydratable on an existing component without updating the server.","solutions":["Ensure the server-side render path produces the same hydratable keys the client consumes — check conditional logic is identical on both sides.","Verify the key string matches exactly between the hydratable() call and the server serialisation.","If the data is optional, handle its absence in fn() rather than requiring it, or guard the hydratable call.","Reproduce in DEV to get the exact missing key, then trace it on the server."],"exampleFix":"// before — client requires a key the server never set\nconst data = hydratable('user-prefs', () => fetchPrefs());\n// server never wrote 'user-prefs'\n\n// after — align server and client\n// server: provide the data under the same key\n// client: keep key consistent\nconst data = hydratable('user-prefs', () => fetchPrefs());","handlingStrategy":"validation","validationCode":"// Ensure server and client agree on hydratable keys.\n// In DEV, wrap hydratable usage to surface the key early:\n// if (import.meta.env.DEV) console.assert(serverKeys.has(key), 'missing', key);","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep server render and client hydration code paths identical — same conditionals, same keys.","Use a single shared constant for hydratable keys to avoid typos.","Run DEV hydration locally before deploying; missing-key errors are DEV-only and silent in prod."],"tags":["svelte","hydration","ssr","async","experimental"],"backgroundTag":null,"analyzedSha":"20b341f10048cf1016a2028ac7eee5595cfef6a5","analyzedAt":"2026-08-12T23:37:30.399Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}