architecture/route-component-import · Route component import

A SvelteKit route entry is rendered by the framework, not imported by other components.

Severity: info · Category: architecture

What it checks

Flags an import, from another component, of a SvelteKit route entry: +page.svelte, +layout.svelte, +error.svelte, and the @ breakout forms of +page/+layout.

Why it matters

A route entry is written on the assumption that SvelteKit renders it. Kit hands a page its data and params, and an error page its page.error and page.status. Imported from somewhere else, the component receives none of that and renders against nothing, or against the importing page’s data standing in for its own.

The mistake is easy to make and reads as reasonable: another page needs the same markup, the markup already exists in a +page.svelte, so it gets imported. Nothing else objects, and the component renders, emptily.

How to fix

Extract the shared markup into a component under $lib and import that from both places, leaving the route entry to SvelteKit.

Configuration

Files matching exemptImporters may import a route entry: a story renders it to look at, a test renders it to assert on, and both supply by hand what SvelteKit would have supplied.

The default is deliberately narrow, and configuring it is an expected step rather than an exceptional one. A string-list option adds to its default and never replaces it, so you can extend this list but not shrink it, which is why it ships covering only the conventions that are common across the ecosystem. If your project marks satellite files another way, add your pattern:

export default {
  rules: {
    'architecture/route-component-import': {
      options: { exemptImporters: ['**/*.fixture.svelte'] }
    }
  }
};

Not reported

• A dynamic import() of a route entry: it is not an import declaration, so the analyzer does not see it.
• An import made from a plain .ts or .js file: import facts are collected from .svelte component files and .svelte.ts / .svelte.js modules only.
• A type-only import (import type P from './+page.svelte', or one whose every specifier is inline-typed). It is erased at build, so nothing renders.
• A project whose routes live somewhere other than src/routes.

Mode differences

None. This rule reads source, the same .svelte and .ts files, everywhere it runs. The CLI, the Vite plugin’s build pass, and the live dashboard’s static baseline all report it identically, and the rendered-HTML pass never re-evaluates it. Scoping a run with --route skips it: component-scoped rules have no route to attribute a finding to.

Disabling

Silence a single occurrence with <!-- svelte-vitals-disable-next-line architecture/route-component-import --> on the line above it, or turn the rule off:

export default {
  rules: {
    'architecture/route-component-import': 'off'
  }
};