react-popover errs with 'Cannot access before initialization'

[mwawrusch]

The following error message pops up with this code and I can't find the bug:
The app is a 14.1.0 next.js app.

VM34076 MainSelectorPopup.tsx:3 Uncaught (in promise) ReferenceError: Cannot access 'MainSelectorPopup' before initialization
    at Module.MainSelectorPopup (VM34076 MainSelectorPopup.tsx:3:56)
    at Module.MainSelectorPopup (VM34081 index.tsx:37:150)
    at Object.registerExportsForReactRefresh (helpers.js:52:40)
    at eval (index.tsx:14:41)
    at eval (index.tsx:14:41)
    at (:3000/pro/inftspaces/storefronts/packages/roji-ui-components/index.tsx (http://localhost:3000/_next/static/chunks/app/(pro)/pro/%5BorganizationIdOrSlug%5D/(storefrontlevel)/storefronts/%5BstorefrontId%5D/layout.js:303:1)
    at options.factory (webpack.js?v=1705948867839:716:31)
    at __webpack_require__ (webpack.js?v=1705948867839:37:33)
    at fn (webpack.js?v=1705948867839:371:21)
    at eval (VM34080 AvatarWithDefaultIcon.tsx:8:76)
    at (:3000/pro/inftspaces/storefronts/packages/roji-ui-components/src/avatars/AvatarWithDefaultIcon.tsx (http://localhost:3000/_next/static/chunks/app/(pro)/pro/%5BorganizationIdOrSlug%5D/(storefrontlevel)/storefronts/%5BstorefrontId%5D/layout.js:369:1)
    at options.factory (webpack.js?v=1705948867839:716:31)
    at __webpack_require__ (webpack.js?v=1705948867839:37:33)
    at fn (webpack.js?v=1705948867839:371:21)
    at eval (VM34079 RowWithLink.tsx:6:88)
    at (:3000/pro/inftspaces/storefronts/packages/roji-ui-components/src/main-selector/RowWithLink.tsx (http://localhost:3000/_next/static/chunks/app/(pro)/pro/%5BorganizationIdOrSlug%5D/(storefrontlevel)/storefronts/%5BstorefrontId%5D/layout.js:413:1)
    at options.factory (webpack.js?v=1705948867839:716:31)
    at __webpack_require__ (webpack.js?v=1705948867839:37:33)
    at fn (webpack.js?v=1705948867839:371:21)
    at eval (VM34076 MainSelectorPopup.tsx:13:70)
    at (:3000/pro/inftspaces/storefronts/packages/roji-ui-components/src/main-selector/MainSelectorPopup.tsx (http://localhost:3000/_next/static/chunks/app/(pro)/pro/%5BorganizationIdOrSlug%5D/(storefrontlevel)/storefronts/%5BstorefrontId%5D/layout.js:402:1)
    at options.factory (webpack.js?v=1705948867839:716:31)
    at __webpack_require__ (webpack.js?v=1705948867839:37:33)
    at Function.fn (webpack.js?v=1705948867839:371:21)

Code

    'use client'

import { useState } from 'react';
import * as Popover from '@radix-ui/react-popover';
import './styles.css';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { iconPopupSelector, iconCloseDialog } from 'roji-ui-icons';
import { H, IconButton, LinkButton } from 'roji-ui';
import { IdNameImageHref } from './IdNameImageHref';
import { RowWithLink } from './RowWithLink';

export interface MainSelectorPopupProps {
//  currentItem: IdNameImageHref;
  items: IdNameImageHref[];
  headerLabel: string;
  createLabel: string;
  createUrl: string;
}

export const MainSelectorPopup = ({items, headerLabel, createLabel, createUrl }: MainSelectorPopupProps) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  return (

    <Popover.Root  open={isOpen} onOpenChange={ setIsOpen}>
      <Popover.Trigger asChild>
        <IconButton> 
          <FontAwesomeIcon icon={iconPopupSelector} className="h-3 w-3"/>
        </IconButton>

      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content className="PopoverContent" sideOffset={5}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>

            <H variant='mid' size="eyebrow">{headerLabel}</H>

            <ul>

            {items.map( (o) => {
              return (<li key={o.id}>
                <RowWithLink item={o} onClose={()=> setIsOpen(false)} /> 
              </li>)
            })}
          </ul>

          <LinkButton href={createUrl} onClick={()=> setIsOpen(false)} > {createLabel}</LinkButton>


          </div>
          <Popover.Close className="absolute right-[8px] top-[8px] h-5 w-5 items-center inline-flex text-foreground/80 hover:text-foreground cursor-pointer " aria-label="Close">
          <FontAwesomeIcon icon={iconCloseDialog} className="h-4 w-4"/>

          </Popover.Close>
          <Popover.Arrow className="PopoverArrow" />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );

}

[mwawrusch]

So this seems to have been fixed by the latest update of nextjs