Marius Posts - Answer Overflow

Marius

•Created by Marius on 3/10/2025 in #help-and-questions

Cannot import type in svelte component

Hi, I'm trying to use prisma-generated types in a Svelte (client side) component.

<script lang="ts">
    import { TagType } from '@prisma/client';
    import { cn } from '$lib/utils';

    export let name;
    export let type: TagType;
</script>

<!--apply tag color based on tagtype-->
<div class={cn("px-2 py-1", type === TagType.FIRE ? "red" : "blue")}>
    <span>{name}</span>
</div>

<script lang="ts">
    import { TagType } from '@prisma/client';
    import { cn } from '$lib/utils';

    export let name;
    export let type: TagType;
</script>

<!--apply tag color based on tagtype-->
<div class={cn("px-2 py-1", type === TagType.FIRE ? "red" : "blue")}>
    <span>{name}</span>
</div>

Is this possible in principle? I want to set the color depending on the value the prop type has. My browser console tells me TagType is undefined, but I don't get why. Vite doesn't report any errors. My IDE tells me that type === TagType.FIRE always returns null because there is no overlap. Can I solve this somehow? Thanks in advance!

5 replies

Gaming

Programming