laravel react inertia vite , yarn prod issue

i am trying to build the file for the production its showing an error like

[commonjs--resolver] Failed to resolve entry for package "firebase". The package may have incorrect main/module/exports specified in its package.json: Missing "." export in "firebase" package
error during build:
Error: Failed to resolve entry for package "firebase". The package may have incorrect main/module/exports specified in its package.json: Missing "." export in "firebase" package

my firebase code ....

import { initializeApp } from "firebase/app";
import 'firebase/messaging'

const firebaseConfig = {
    apiKey: 'AIzaSyCu709vqkvWoPcWjrZdWaC-cX98cgdbpiQ',
    authDomain: 'laravelfcmnotification.firebaseapp.com',
    projectId: 'laravelfcmnotification',
    storageBucket: 'laravelfcmnotification.appspot.com',
    messagingSenderId: '157744396575',
    appId: '1:157744396575:web:1a7443b1f0747d4edb582a',
};
const firebaseApp = initializeApp(firebaseConfig)


export default firebaseApp;

import { useForm } from '@inertiajs/inertia-react';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import React from 'react';
import { Toasts } from './Components/toasts';
import { ToastProps } from './Components/toasts/Toast';
import firebaseApp from './firebase';
import useRoute from './Hooks/useRoute';

export const FirebaseMessagingProvider = ({ children }) => {
  const { post, data, setData } = useForm({
    token: '',
  });
  const [toasts, setToasts] = React.useState<ToastProps[]>([
    {
      id: 'demo',
      message: 'test',
      title: 'notification title',
      type: 'success',
    },
  ]);
  React.useEffect(() => {
    const storedToken = window.localStorage.getItem('token');
    if (
      (!storedToken && data.token !== '') ||
      (storedToken &&
        data.token &&
        data.token !== '' &&
        data.token !== storedToken)
    ) {
      post(route('device-user.store'), {
        onSuccess: () => {
          console.log('success');
          window.localStorage.setItem('token', data.token);
        },
        onError: e => {
          console.log(e);
        },
      });
    }
    if (data.token && data.token !== '') {
    }
  }, [data]);
  const route = useRoute();
  React.useEffect(() => {
    setTimeout(() => {
      const firebaseMessaging = getMessaging(firebaseApp);
      getToken(firebaseMessaging).then(token => {
        console.log('firebase token', token);
        setData({ token });
      });
      onMessage(firebaseMessaging, payload => {
        console.log('payload', JSON.stringify(payload, null, 2));
        setToasts(toast => [
          ...toast,
          {
            id: payload.messageId,
            title: payload.notification.title,
            message: payload.notification.body,
            type: 'success',
          },
        ]);
      });
    }, 200);
  }, []);
  return (
    <>
      {children}
      <Toasts
        toasts={toasts}
        removeToast={(id: string) => {
          setToasts(each => each.filter(item => item.id != id));
        }}
      />
    </>
  );
};

firebase version

    "firebase": "^9.9.4",

my main file here FirebaseMessagingProvider.tsx used

import React from 'react';
import { render } from 'react-dom';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import './bootstrap';
import { InertiaProgress } from '@inertiajs/progress';
import { RouteContext } from '@/Hooks/useRoute';
import 'sweetalert2/src/sweetalert2.scss'
import firebaseApp from './firebase';
import { FirebaseMessagingProvider } from './FirebaseMessagingProvider';


const appName =
    window.document.getElementsByTagName('title')[0]?.innerText || 'Telemedicine';

createInertiaApp({
    title: title => `${title} - ${appName}`,
    resolve: name =>
        resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**')),
    setup({ el, App, props }) {

        return render(
            <RouteContext.Provider value={(window as any).route}>
                <FirebaseMessagingProvider>
                    <App {...props} />
                </FirebaseMessagingProvider>
            </RouteContext.Provider>,
            el,
        );
    },
});

InertiaProgress.init({ color: '#4B5563' });

please help how can i resolve this