Error when importing realtimekit-react-ui in React component with AstroJS

[Apexal]

When using Astro v4.16.18 on Node v22.17.0 and React client components, I receive the following error:

01:01:39 [ERROR] Directory import '/fake_path/node_modules/.pnpm/@cloudflare+realtimekit-react-ui@1.0.3/node_modules/@cloudflare/realtimekit-react-ui/dist/es/components' is not supported resolving ES modules imported from /fake_path/node_modules/.pnpm/@cloudflare+realtimekit-react-ui@1.0.3/node_modules/@cloudflare/realtimekit-react-ui/dist/es/index.js
   Stack trace:
     at finalizeResolution (node:internal/modules/esm/resolve:263:11)
     at defaultResolve (node:internal/modules/esm/resolve:984:11)
     [...] See full stack trace in the browser, or rerun with --verbose.

from the following React component file:

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";
import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";
import React, { useEffect } from "react";

type PodcastRecordingStudioSessionProps = {
  authToken: string;
};
export function PodcastRecordingStudioSession({
  authToken,
}: PodcastRecordingStudioSessionProps) {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    initMeeting({
      authToken,
      defaults: {
        audio: true,
        video: true,
      },
    });
  }, []);

  return (
    <div style={{ height: "480px" }}>
      <RtkMeeting mode="fill" meeting={meeting} />
    </div>
  );
}

I imagine this is related to how Astro handles React components? I noticed I can also import from @cloudflare/realtimekit-react-ui/es but the error does not change. It appears to want me to import from a file, not from a directory, but the package.json is not setup to support this?

[vaibhavshn]

The error is most likely coming from newer node versions: https://nodejs.org/api/errors.html#err_unsupported_dir_import, seeing this in the console when running it locally.

Thanks for reporting this issue, we'll see how we can fix this.

[Apexal]

Thanks for taking a look! Super excited to use this framework.