Vue blank page after separating list item component

I have the following code:

ReceiptList.vue

<template>
Hello
<div class="list-container">  
        <ul>
            <ReceiptListItem/>
        </ul>
</div>
</template>

<script setup>

import { ReceiptListItem } from '@/components/ReceiptListItem.vue' 

</script>

ReceiptListItem.vue

<template> 
<li>
    <div class="two-rows">
        <div class="line-spread">
            <span class="id">1212121</span>
        </div>
        <div class="line-spread">
            <span class="">1</span>
        </div>
    </div>
</li>
</template>
    
<script setup>
</script>

As soon as I comment out ReceiptListItem from template and script in ReceiptList.vue it works fine and shows Hello. Howewer with presentReceiptListItem the page becomes blank.
What could be the reason of this behaviour?

>Solution :

It’s not a named import, so you have to import the component without the curly braces:

import ReceiptListItem from '@/components/ReceiptListItem.vue' 

instead of

import {ReceiptListItem} from '@/components/ReceiptListItem.vue' 

Rest seems to work when I put it into a playground