Importing constant false positive

[Bilge]

Describe the bug

I export two constants in my .svelte component.

<script lang="ts">
    export const DEFAULT_WEIGHT = .75;
    export const WEIGHT_ENCODING_EXPONENT = 1000;
</script>

I import them in a .ts file. Svelte check says this is an error, but it compiles fine.

import CrankingForm from './CrankingForm.svelte';

Error: Property 'DEFAULT_WEIGHT' does not exist on type 'Component<Record<string, never>, { DEFAULT_WEIGHT: 0.75; WEIGHT_ENCODING_EXPONENT: 1000; }, "">'. 
            form.weight > 0
                && form.weight !== CrankingForm.DEFAULT_WEIGHT * CrankingForm.WEIGHT_ENCODING_EXPONENT
        );


packer.ts:70:79
Error: Property 'WEIGHT_ENCODING_EXPONENT' does not exist on type 'Component<Record<string, never>, { DEFAULT_WEIGHT: 0.75; WEIGHT_ENCODING_EXPONENT: 1000; }, "">'. 
            form.weight > 0
                && form.weight !== CrankingForm.DEFAULT_WEIGHT * CrankingForm.WEIGHT_ENCODING_EXPONENT
        );

I cannot imagine what else it could possibly want me to do. Moving the constants to a <script module> block instead of the default (non-module) block makes no difference.

Reproduction

<!-- CrankingForm.svelte -->
<script lang="ts">
    export const DEFAULT_WEIGHT = .75;
    export const WEIGHT_ENCODING_EXPONENT = 1000;
</script>

// packer.ts
import CrankingForm from './CrankingForm.svelte';

export default abstract class Packer {
    protected packWeight() {
        return form.weight !== CrankingForm.DEFAULT_WEIGHT * CrankingForm.WEIGHT_ENCODING_EXPONENT;
    }
}

Expected behaviour

This should not be an error at all, since the property does exist.

System Info

• OS: Windows
• IDE: PhpStorm

Which package is the issue about?

svelte-check

Additional Information, eg. Screenshots

No response

[jasonlyu123]

export const is not a static variable but an instance variable for the component. What you want is to export const in <script module> and then use a named import to import the variable.

<!-- CrankingForm.svelte -->
<script lang="ts" module>
    export const DEFAULT_WEIGHT = .75;
    export const WEIGHT_ENCODING_EXPONENT = 1000;
</script>

// packer.ts
import { DEFAULT_WEIGHT, WEIGHT_ENCODING_EXPONENT } from './CrankingForm.svelte';

export default abstract class Packer {
    protected packWeight() {
        return form.weight !== DEFAULT_WEIGHT * WEIGHT_ENCODING_EXPONENT;
    }
}

or

// packer.ts
import * as CrankingForm from './CrankingForm.svelte';

export default abstract class Packer {
    protected packWeight() {
        return form.weight !== CrankingForm.DEFAULT_WEIGHT * CrankingForm.WEIGHT_ENCODING_EXPONENT;
    }
}

[Bilge]

Unfortunately, this completely confuses my editor, but it does make svelte-check happy.

Also, strange that it worked without doing all that.

[jasonlyu123]

You'll need to enable typescript-svelte-plugin for your editor. Without the plugin, TSServer won't understand the Svelte files and won't know what named exports it has. I am not sure if it works in the runtime. From my testing, it doesn't, and I have never seen it being used like this.

[Bilge]

Of course I have the Svelte plugin enabled 😏

Anyway, this isn't a fault of the language tool, I guess, so I'll have to find a way to contact JetBrains about this...

[Bilge]

I still keep getting errors when svelte-check is watching and re-runs.

Error: Module '"../../../component/cranking/CrankingForm.svelte"' has no exported member 'DEFAULT_WEIGHT'. Did you mean to use 'import DEFAULT_WEIGHT from "../../../component/cranking/CrankingForm.svelte"' instead? 
import CrankingFormValues from '../cranking form values';
import { DEFAULT_WEIGHT, WEIGHT_ENCODING_EXPONENT } from '../../../component/cranking/CrankingForm.svelte';



static/ts/cranking/pack/packer.ts:3:26
Error: Module '"../../../component/cranking/CrankingForm.svelte"' has no exported member 'WEIGHT_ENCODING_EXPONENT'. Did you mean to use 'import WEIGHT_ENCODING_EXPONENT from "../../../component/cranking/CrankingForm.svelte"' instead? 
import CrankingFormValues from '../cranking form values';
import { DEFAULT_WEIGHT, WEIGHT_ENCODING_EXPONENT } from '../../../component/cranking/CrankingForm.svelte';

The errors do not appear on first run; only on re-checks when a file a changed, triggering the watch.

[jasonlyu123]

I can not reproduce the issue with file watch. We'll need a reproduction repository to check. One thing to note is that if the file has a syntax error in the template, it is possible that svelte-check can't fully process the file and thus can't find the export. In that case, the export not found error is expected.