Svelte v5 compiling v4 component: Component has unused export property

[webJose]

Describe the bug

This I show no REPL because it is a build thing:

vite v5.3.3 building SSR bundle for production...
transforming (68) node_modules\svelte\src\internal\server\errors.js10:43:53 AM [vite-plugin-svelte] src/lib/Progress/Progress.svelte:6:11 Component has unused export property 'height'. If it is for external reference only, please consider using `export const height`

The component is a Bootstrap progress component (the outer DIV). Really simple stuff:

<div class={combineClasses(`progress`, cssClass)} style:height>
    <slot {progressRange} {Bar} />
</div>

It seems it doesn't like the shorthand syntax, but the built product works as expected.

Furthermore, I see Intellisense feedback stating the same thing in VS Code (this is v5-next.178):

Reproduction

Not needed, hopefully?

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 18.08 GB / 39.73 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.87)
    Internet Explorer: 11.0.22621.3527

Severity

annoyance

[paoloricciuti]

Reproduction is always helpful: it could be a specific way you wrote the code that is breaking this so please show us the whole file. 😄

[webJose]

You're twisting my arm with that request! Haha. I cannot always show codebase from this project. This time I think I can (nothing new in it):

<script lang="ts">
    import { combineClasses } from "$lib/utils/helpers.js";
    import { writable } from "svelte/store";
    import Bar, { type ProgressRange } from "./ProgressBar.svelte";

    // Props.
    /**
     * Sets the progress minimum value.
     */
    export let minimum: number = 0;
    // Props.
    /**
     * Sets the progress maximum value.
     */
    export let maximum: number = 100;
    // Props.
    /**
     * Sets the progress height, in any CSS unit.
     */
    export let height: string = "";
    // Props.
    /**
     * Sets the additional CSS classes for the progress DIV container
     */
    let cssClass: string = "";
    export { cssClass as class };

    let progressRange = writable<ProgressRange>({
        minimum: 0,
        maximum: 0,
    });

    $: progressRange.set({
        minimum,
        maximum
    });
</script>

<div class={combineClasses(`progress`, cssClass)} style:height>
    <slot {progressRange} {Bar} />
</div>

This is the entirety of the component.

[paoloricciuti]

Ok fixed it, will pr soon