cloudflare / cloudflare/realtimekit-ui

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

Open
#37 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.