Intermittent "i.replaceAll is not a function" error on UButton and UBadge

[maximepvrt]

Environment

---

• Operating System: Darwin
• Node Version: v20.18.0
• Nuxt Version: 3.14.159
• CLI Version: 3.15.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxthq/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @sentry/nuxt/[email protected]
• Build Modules: -

---

Version

2.19.2

Reproduction

x

Description

I occasionally encounter the error i.replaceAll is not a function on a page using @nuxt/ui. The issue happens sporadically, and I cannot identify a consistent trigger. I discovered this problem via Sentry in production.

The page where this occurs is based on the following template @nuxt/ui-pro:
https://github.com/nuxt-ui-pro/saas/blob/main/app/pages/blog/%5Bslug%5D.vue

Additional context

<script setup lang="ts">
import { withoutTrailingSlash } from 'ufo'

const route = useRoute()

const { data: post } = await useAsyncData(route.path, () => queryContent(route.path).findOne(), {transform: p => {
    p.authors = (p.authors ?? []).map((a) => {
      return {...a, avatar: {src: `/team/${a.slug}.jpg`}}
    })
    return p
  }})
if (!post.value) {
  throw createError({ statusCode: 404, fatal: true })
}

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryContent('/ressources')
        .where({ _extension: 'md' })
        .without(['body', 'excerpt'])
        .sort({ date: -1 })
        .findSurround(withoutTrailingSlash(route.path))
    , { default: () => [] })

useSeoMeta({
  title: post.value.title ?? null,
  description: post.value.description ?? null,
})

</script>

<template>
  <UContainer v-if="post">
    <UPageHeader
        :title="post.title"
        :description="post.description"
    >
      <template #headline>
        <UBadge
            v-bind="{label: post.category}"
            variant="subtle"
        />
        <span class="text-gray-500 dark:text-gray-400">&middot;</span>
        <time class="text-gray-500 dark:text-gray-400">{{ new Date(post.date).toLocaleDateString('fr', { year: 'numeric', month: 'short', day: 'numeric' }) }}</time>
        <span class="text-gray-500 dark:text-gray-400">&middot;</span>
        <span class="text-gray-500 dark:text-gray-400">{{post.readingTime > 1 ? `${post.readingTime} mins de lecture` : '1 min de lecture' }}</span>
      </template>
      <div class="flex flex-wrap items-center gap-3 mt-4">
        <UButton
            v-for="(author, index) in post.authors"
            :key="index"
            color="white"
            target="_blank"
            size="sm"
        >
          <UAvatar
              v-bind="author.avatar"
              :alt="author.name"
              size="2xs"
          />

          {{ author.name }}
        </UButton>
      </div>
    </UPageHeader>

    <UPage>
      <UPageBody prose>
        <ContentRenderer
            v-if="post && post.body"
            :value="post"
        />

        <hr v-if="surround?.length" />

        <UContentSurround :surround="surround" />
      </UPageBody>

      <template #right>
        <UContentToc
            v-if="post.body && post.body.toc"
            :links="post.body.toc.links"
            title="Sommaire"
        />
      </template>
    </UPage>
  </UContainer>
</template>

Logs