Hello, everyone!
I got a very strange bug.
It happens at runtime when importing a single-file component that imports many other components.
For example:
<template>
<div class="page">
<div class="page-content">
...
${Boolean(nextBooking()) && $h`
<div>
<div class="block-title">
${$t('NextBooking')}
</div>
<${BookingList} bookings=${[nextBooking()]} class="card"></${BookingList}>
</div>
`}
...
</div>
</div>
</template>
The problem occurs on the line <${BookingList} ...></${BookingList}>
. Even if the condition userHasFutureBookings()
is false
. If I remove this line the problem goes away.
Has anyone met something similar?
In your example, what is the intended value of ‘BookingList’ to be?
Component template code:
<template>
<div class="list media-list booking-list ${props.class}">
<ul>
${groupedBookings().map((group) => $h`
<li class="list-group-title" style="position: relative;">${group.name}</li>
${group.bookings.map((booking) => $h`
<li class="booking-item">
${props.link ? $h`
<a href="#" class="item-link item-content" @click=${() => clickLink(booking)}>
<${BookingListItemInner} booking=${booking}></${BookingListItemInner}>
</a>
` : $h`
<div class="item-content">
<${BookingListItemInner} booking=${booking}></${BookingListItemInner}>
</div>
`}
</li>
`)}
`)}
</ul>
</div>
</template>
I successfully use this component in another part of application.
Also I had this error in the simplest components as well.
I was getting a very similar error that was actually being caused by the chunking behavior of Webpack when I was building the app for production, so it would run fine under dev and then give this error under production. I disabled splitChunks
in my case which fixed the issue but I’m not sure what exactly the cause was.
Thanks for you opinion!
Yes, it seems problems with production building.
I use Vite now but will try to find something similar to splitChunks
.
I used vite-plugin-chunk-split plugin with strategy: 'default'
option.
And it works!