Import modules inside scripts in Astro component | Astro Lounge | Page 1

Hello, I am trying to create a simple breadcrumbs component, getting the pathname of the url, and splitting it to render the breadcrumbs.
But I also want to translate them, that's why I am importing the i18next module too.

<script>
  import { t } from "i18next";
  import { localizePath } from "astro-i18next";
  const pathName = window.location.pathname;
  const paths = pathName.split('/');

  const breadcrumbItems = paths.map((path, index) => {
  if (index === 0) {
    return `
      <div class="breadcrumbs_item">
        <a href="/" class="breadcrumbs_link icon" aria-label={t('home')}>
          <img src="/images/ui/home.svg" alt="${t('home')}" />
        </a>
      </div>`;
  } else if (index === paths.length - 1) {
    return `
      <div class="breadcrumbs_item active">
        <div class="breadcrumbs_link">
          <span class="breadcrumbs_text">${t(path)}</span>
        </div>
      </div>`;
  } else {
    const localizedPath = localizePath(path);
    return `
      <div class="breadcrumbs_item">
        <a href="${localizedPath}" class="breadcrumbs_link" aria-label="${t(path)}">
          <span class="breadcrumbs_text">${t(path)}</span>
        </a>
      </div>`;
  }
}).join('\n');

const PageBreadcrumbs = document.querySelector('.page_breadcrumbs');
PageBreadcrumbs.innerHTML = breadcrumbItems;

</script>

<div class="page_breadcrumbs"></div>

First I received this error in the image:

Then I started to think what other options I could use.
Any other way to get the window.location.pathname in the header of the component? --- here --- to avoid using the scripts?

#Import modules inside scripts in Astro component