Skip to content

no-unused-props linting error when renaming Svelte 5 props #1182

Closed
@deboer-tim

Description

@deboer-tim

Describe the bug

We're in the process of migrating a codebase from Svelte 4 to 5 and hitting an odd linting issue. We'd like components to expose the standard aria-label property externally, with a different internal name like so:
let { 'aria-label': ariaLabel }: { 'aria-label'?: string; } = $props();

This seems to work when it is the only property on the component, but if there are other properties then linting fails with a svelte/no-unused-props error.

Reproduction

Using:

  • "svelte": "5.25.3",
  • "svelte-eslint-parser": "^1.1.1",

Run eslint against the file below. I get an error on the aria-label prop that I think is invalid:
6:5 error 'aria-label' is an unused Props property svelte/no-unused-props

Here's the odd thing - remove the 'a' property (delete lines 3, 7, and 13) and the aria-label warning goes away. 🤷🏻‍♂️

<script lang="ts">
interface Props {
  a: string;
  'aria-label'?: string;
}
let {
  a,
  'aria-label': ariaLabel,
}: Props = $props();
</script>

<div aria-label="{ariaLabel}">
  {a}
</div>

Logs

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 925.83 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.0.0 - ~/Library/pnpm/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.1 - ~/Library/pnpm/npm
    pnpm: 10.6.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 134.0.6998.166
    Safari: 18.3.1

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions