cloudflare / cloudflare/realtimekit-ui
Error when importing realtimekit-react-ui in React component with AstroJS
- Dominant language
- TypeScript
- Stars
- 64
- Forks
- 22
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 5
Description
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:
```tsx
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 (
);
}
```
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?
Contributor guide
Assessment
This issue has not been assessed yet.