The tag name provided ('$') is not a valid name

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! :tada: