{"record":{"id":"4b15b0379975911e","repo":"sveltejs/kit","slug":"placing-sveltekit-body-directly-inside-body-is","errorCode":null,"errorMessage":"Placing %sveltekit.body% directly inside is not recommended, as your app may break for users who have certain browser extensions installed.\n\nConsider wrapping it in an element:\n\n

\n %sveltekit.body%\n

","messagePattern":"Placing (.+?)veltekit\\.body% directly inside is not recommended, as your app may break for users who have certain browser extensions installed\\.\n\nConsider wrapping it in an element:\n\n

\n (.+?)veltekit\\.body%\n

","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/kit/src/runtime/client/client.js","lineNumber":496,"sourceCode":" * @param {Map>} map\n * @returns {Generator<[string, T]>} every entry of the cache map, keyed by remote key\n */\nfunction* cache_entries(map) {\n\tfor (const [id, entries] of map) {\n\t\tfor (const [payload, entry] of entries) {\n\t\t\tyield [create_remote_key(id, payload), entry];\n\t\t}\n\t}\n}\n\n/**\n * @param {import('./types.js').SvelteKitApp} _app\n * @param {HTMLElement} _target\n * @param {Parameters[1]} [data]\n */\nasync function _start(_app, _target, data) {\n\tif (DEV && _target === document.body) {\n\t\tconsole.warn(\n\t\t\t'Placing %sveltekit.body% directly inside is not recommended, as your app may break for users who have certain browser extensions installed.\\n\\nConsider wrapping it in an element:\\n\\n

\\n %sveltekit.body%\\n

'\n\t\t);\n\t}\n\n\tif (payload.data) {\n\t\tconst { q = {}, p = {}, l = {}, f = {} } = payload.data;\n\n\t\t// store the whole nodes — error records seed the corresponding\n\t\t// resources in a failed state when they are created during hydration\n\t\tfor (const k in q) query_responses[k] = q[k];\n\t\tfor (const k in l) query_responses[k] = l[k];\n\t\tfor (const k in f) query_responses[k] = f[k];\n\t\tfor (const k in p) prerender_responses[k] = p[k];\n\t}\n\n\t// detect basic auth credentials in the current URL\n\t// https://github.com/sveltejs/kit/pull/11179\n\t// if so, refresh the page without credentials","sourceCodeStart":478,"sourceCodeEnd":514,"githubUrl":"https://github.com/sveltejs/kit/blob/03f1687fe612ce3d2d9131139b5b188d9cf90c64/packages/kit/src/runtime/client/client.js#L478-L514","documentation":"SvelteKit recommends mounting the app inside a wrapper element rather than directly on ``, because browser extensions that inject DOM nodes into `` can break hydration or the app layout. When DEV detects the hydration target is `document.body`, it warns and suggests wrapping `%sveltekit.body%` in a `display: contents` div.","triggerScenarios":"An `app.html` template containing `%sveltekit.body%` as a direct child of `` (no wrapping element), viewed in DEV; `_start` in packages/kit/src/runtime/client/client.js checks `_target === document.body`.","commonSituations":"Projects migrated from old app templates; hand-written `src/app.html` copied from outdated examples or created from scratch.","solutions":["Edit `src/app.html` to wrap `%sveltekit.body%` in a container div with `style=\"display: contents\"`","Re-test the app in DEV to confirm the warning disappears"],"exampleFix":"\n\n %sveltekit.body%\n\n\n\n

%sveltekit.body%

\n","handlingStrategy":"validation","validationCode":"// check app.html at build time\nimport { readFileSync } from 'node:fs';\nconst html = readFileSync('src/app.html', 'utf8');\nif (!/]*display:\\s*contents[^>]*>\\s*%sveltekit\\.body%/.test(html)) {\n throw new Error('%sveltekit.body% must be wrapped in an element');\n}","typeGuard":"function isBodyTarget(el) { return el === document.body; }","tryCatchPattern":null,"preventionTips":["Keep the wrapper `

` around `%sveltekit.body%` in app.html","Re-verify app.html after SvelteKit version upgrades"],"tags":["hydration","html-template","dev-warning"],"backgroundTag":"body-hydration-target","analyzedSha":"03f1687fe612ce3d2d9131139b5b188d9cf90c64","analyzedAt":"2026-09-02T02:01:50.504Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T06:17:21.866Z"}