# svelte/no-conflicting-module-names

disallow a .svelte component and a same-named runes module (e.g. Foo.svelte and Foo.svelte.ts) from coexisting

# 📖 Rule Details

Since Svelte 5 you can write runes modules named .svelte.ts and .svelte.js. When a component Foo.svelte and a module Foo.svelte.ts sit in the same folder, the import specifier ./Foo.svelte no longer has one meaning. Different tools resolve it differently:

Tool ./Foo.svelte resolves to
Bundlers (Vite) and svelte-check Foo.svelte (component)
Plain TypeScript (tsc, typescript-eslint type checks) Foo.svelte.ts (module)

Plain TypeScript does not know the .svelte extension, so it appends .ts and lands on the module. Your app builds and runs with the component, while type checking and type-aware lint quietly use the module. The mismatch is silent and hard to spot.

This rule reports both files of the collision: the component Foo.svelte and the module Foo.svelte.ts. This plugin lints .svelte.js and .svelte.ts files too, and a lint run may include only one of the two files, so reporting on both makes sure you see the problem either way.

To fix it, rename the module (for example to foo-state.svelte.ts). The component keeps its name.

The following module extensions trigger a report: .ts, .tsx, .js, .jsx, .mts, .cts, .mjs, .cjs.

Declaration files are not reported. Foo.svelte.d.ts and Foo.d.svelte.ts are legitimate and do not shadow the component.


src/
  Foo.svelte      // ✗ BAD: reported, a module with the same name exists
  Foo.svelte.ts   // ✗ BAD: reported, it collides with Foo.svelte

src/
  Foo.svelte            // ✓ GOOD
  foo-state.svelte.ts   // ✓ GOOD: a different name, no collision

# 🔧 Options

Nothing.

  • None

# 📚 Further Reading

# 🔍 Preset

This rule is not included in any preset. Enable it explicitly if you want it.

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.22.0

# 🔍 Implementation