sveltejs/kit · error

Only Svelte files can reference named layouts. Remove '${mat

Error message

Only Svelte files can reference named layouts. Remove '${match[3] || match[6]}' from ${file} (at ${project_relative})

What it means

Named layout references (the `@group` suffix, e.g. +layout@auth) are only allowed in Svelte files like +layout@group.svelte. When a JS/TS module filename (matched by module_name_pattern) contains an `@` reference (capture groups 3 or 6), sync throws this error because named layouts only make sense for route components, not for server/universal load modules.

Source

Thrown at packages/kit/src/core/sync/create_manifest_data/index.js:558

		}

		return {
			kind: 'component',
			is_page: !!match[1],
			is_layout: !!match[3],
			is_error: !!match[5],
			uses_layout: match[2] ?? match[4]
		};
	}

	const module_extension = module_extensions.find((ext) => file.endsWith(ext));
	if (module_extension) {
		const name = file.slice(0, -module_extension.length);
		const match = module_name_pattern.exec(name);
		if (!match) {
			throw new Error(`Files prefixed with + are reserved (saw ${project_relative})`);
		} else if (match[3] || match[6]) {
			throw new Error(
				// prettier-ignore
				`Only Svelte files can reference named layouts. Remove '${match[3] || match[6]}' from ${file} (at ${project_relative})`
			);
		}

		const kind = match[1] || match[4] || match[7] ? 'server' : 'universal';

		return {
			kind,
			is_page: !!match[2],
			is_layout: !!match[5]
		};
	}

	throw new Error(`Files and directories prefixed with + are reserved (saw ${project_relative})`);
}

/**

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Remove the @group part from the module filename: +page@group.js → +page.js.
2. Keep the @group reference only on the corresponding Svelte file (+layout@group.svelte).
3. If you need per-group load logic, place the module alongside the plain route file — group association comes from the directory structure and the .svelte component, not the module.

Example fix

// before
src/routes/(app)/+layout@dashboard.ts
// after
src/routes/(app)/+layout.ts   (+layout@dashboard.svelte keeps the named layout)

for (const f of routeFiles.filter((f) => f.startsWith('+') && /\.(js|ts)$/.test(f))) {
  if (/^\+(page|layout)@/.test(f)) throw new Error(`@named-layout not allowed on module file: ${f}`);
}

function moduleUsesNamedLayout(basename) {
  return /^\+(page|layout)@[a-zA-Z0-9_-]*/.test(basename);
}

null

When it happens

Trigger: Creating files like +page@group.js, +layout@auth.ts, or +page@group.server.js under src/routes — module files with an @named-layout suffix.

Common situations: Copying the name of a +layout@group.svelte file when creating its companion load module; misunderstanding that @group applies only to the Svelte component; renaming a component to .ts without removing the @ part.

Related errors

• Files prefixed with + are reserved (saw ${project_relative})
• Files and directories prefixed with + are reserved (saw ${pr
• Invalid route ID ${id}
• Invalid param definition
• Missing params for dynamic route ID ${id}

AI-assisted analysis of sveltejs/kit@03f1687fe6 (2026-09-02). Data as JSON: /api/errors/e45344749c4c2add. Report an issue: GitHub.