Skip to content

Commit abb9251

Browse files
MananTankMananTank
committed
[TOOL-3730] Dashboard: Fix forwardRef error with certain bundler setup
1 parent ab738eb commit abb9251

File tree

2 files changed

+128
-124
lines changed

2 files changed

+128
-124
lines changed

‎.changeset/crazy-cups-jump.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Fix "Cannot read properties of undefined (reading 'forwardRef')" error in certain bundler setups

‎packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx

Lines changed: 123 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
2-
import React, { useState, useRef, useEffect } from "react";
2+
import type React from "react";
3+
import { useState, useRef, useEffect, forwardRef } from "react";
34
import {
45
CarbonDocumentAudio,
56
CarbonDocumentUnknown,
@@ -49,134 +50,132 @@ import { useResolvedMediaType } from "./useResolvedMediaType.js";
4950
* @param props - Refer to [`MediaRendererProps`](https://portal.thirdweb.com/references/typescript/v5/MediaRendererProps) to see the available props.
5051
*/
5152
export const MediaRenderer = /* @__PURE__ */ (() =>
52-
React.forwardRef<HTMLMediaElement, MediaRendererProps>(
53-
function Media_Renderer(
54-
{
55-
src,
56-
poster,
57-
alt,
58-
gatewayUrl,
59-
requireInteraction = false,
60-
width = "300px",
61-
height = "300px",
62-
style,
63-
mimeType,
64-
client,
65-
controls,
66-
className,
67-
},
68-
ref,
69-
) {
70-
const mergedStyle: React.CSSProperties = {
71-
objectFit: "contain",
72-
...style,
73-
};
53+
forwardRef<HTMLMediaElement, MediaRendererProps>(function Media_Renderer(
54+
{
55+
src,
56+
poster,
57+
alt,
58+
gatewayUrl,
59+
requireInteraction = false,
60+
width = "300px",
61+
height = "300px",
62+
style,
63+
mimeType,
64+
client,
65+
controls,
66+
className,
67+
},
68+
ref,
69+
) {
70+
const mergedStyle: React.CSSProperties = {
71+
objectFit: "contain",
72+
...style,
73+
};
7474

75-
const { mediaInfo, isFetched: mediaInfoIsFetched } = useResolvedMediaType(
76-
client,
77-
src ?? undefined,
78-
mimeType,
79-
gatewayUrl,
80-
);
75+
const { mediaInfo, isFetched: mediaInfoIsFetched } = useResolvedMediaType(
76+
client,
77+
src ?? undefined,
78+
mimeType,
79+
gatewayUrl,
80+
);
8181

82-
const { mediaInfo: possiblePosterSrc } = useResolvedMediaType(
83-
client,
84-
poster ?? undefined,
85-
undefined,
86-
gatewayUrl,
87-
);
82+
const { mediaInfo: possiblePosterSrc } = useResolvedMediaType(
83+
client,
84+
poster ?? undefined,
85+
undefined,
86+
gatewayUrl,
87+
);
8888

89-
if (!mediaInfoIsFetched || !src) {
90-
return <div style={style} />;
91-
}
89+
if (!mediaInfoIsFetched || !src) {
90+
return <div style={style} />;
91+
}
9292

93-
if (mediaInfo.mimeType) {
94-
// html content
95-
if (mediaInfo.mimeType.startsWith("text/html")) {
96-
return (
97-
<IframePlayer
98-
style={mergedStyle}
99-
src={mediaInfo.url}
100-
poster={possiblePosterSrc.url}
101-
ref={ref as unknown as React.ForwardedRef<HTMLIFrameElement>}
102-
requireInteraction={requireInteraction}
103-
className={className}
104-
alt={alt}
105-
/>
106-
);
107-
}
93+
if (mediaInfo.mimeType) {
94+
// html content
95+
if (mediaInfo.mimeType.startsWith("text/html")) {
96+
return (
97+
<IframePlayer
98+
style={mergedStyle}
99+
src={mediaInfo.url}
100+
poster={possiblePosterSrc.url}
101+
ref={ref as unknown as React.ForwardedRef<HTMLIFrameElement>}
102+
requireInteraction={requireInteraction}
103+
className={className}
104+
alt={alt}
105+
/>
106+
);
107+
}
108108

109-
// 3d model
110-
if (mediaInfo.mimeType.startsWith("model")) {
111-
console.error(
112-
"Encountered an unsupported media type. 3D model support was removed in v5.92.0. To add a 3D model to your app, use @google/model-viewer and use the ModelViewer component.",
113-
);
114-
}
109+
// 3d model
110+
if (mediaInfo.mimeType.startsWith("model")) {
111+
console.error(
112+
"Encountered an unsupported media type. 3D model support was removed in v5.92.0. To add a 3D model to your app, use @google/model-viewer and use the ModelViewer component.",
113+
);
114+
}
115115

116-
// video
117-
if (mediaInfo.mimeType.startsWith("video")) {
118-
return (
119-
<VideoPlayer
120-
style={mergedStyle}
121-
src={mediaInfo.url}
122-
ref={ref as unknown as React.ForwardedRef<HTMLVideoElement>}
123-
poster={
124-
possiblePosterSrc.mimeType?.startsWith("image/")
125-
? possiblePosterSrc.url
126-
: undefined
127-
}
128-
requireInteraction={requireInteraction}
129-
className={className}
130-
controls={controls}
131-
/>
132-
);
133-
}
116+
// video
117+
if (mediaInfo.mimeType.startsWith("video")) {
118+
return (
119+
<VideoPlayer
120+
style={mergedStyle}
121+
src={mediaInfo.url}
122+
ref={ref as unknown as React.ForwardedRef<HTMLVideoElement>}
123+
poster={
124+
possiblePosterSrc.mimeType?.startsWith("image/")
125+
? possiblePosterSrc.url
126+
: undefined
127+
}
128+
requireInteraction={requireInteraction}
129+
className={className}
130+
controls={controls}
131+
/>
132+
);
133+
}
134134

135-
// audio
136-
if (mediaInfo.mimeType.startsWith("audio")) {
137-
return (
138-
<AudioPlayer
139-
style={mergedStyle}
140-
src={mediaInfo.url}
141-
poster={possiblePosterSrc.url}
142-
alt={alt}
143-
ref={ref as unknown as React.ForwardedRef<HTMLAudioElement>}
144-
className={className}
145-
height={height}
146-
width={width}
147-
controls={controls}
148-
/>
149-
);
150-
}
135+
// audio
136+
if (mediaInfo.mimeType.startsWith("audio")) {
137+
return (
138+
<AudioPlayer
139+
style={mergedStyle}
140+
src={mediaInfo.url}
141+
poster={possiblePosterSrc.url}
142+
alt={alt}
143+
ref={ref as unknown as React.ForwardedRef<HTMLAudioElement>}
144+
className={className}
145+
height={height}
146+
width={width}
147+
controls={controls}
148+
/>
149+
);
150+
}
151151

152-
// image
153-
if (mediaInfo.mimeType.startsWith("image/")) {
154-
return (
155-
<ImageRenderer
156-
style={mergedStyle}
157-
src={mediaInfo.url}
158-
alt={alt}
159-
ref={ref as unknown as React.ForwardedRef<HTMLImageElement>}
160-
className={className}
161-
height={height}
162-
width={width}
163-
/>
164-
);
165-
}
152+
// image
153+
if (mediaInfo.mimeType.startsWith("image/")) {
154+
return (
155+
<ImageRenderer
156+
style={mergedStyle}
157+
src={mediaInfo.url}
158+
alt={alt}
159+
ref={ref as unknown as React.ForwardedRef<HTMLImageElement>}
160+
className={className}
161+
height={height}
162+
width={width}
163+
/>
164+
);
166165
}
166+
}
167167

168-
// unknown mime types or no mime type
169-
return (
170-
<LinkPlayer
171-
style={mergedStyle}
172-
src={mediaInfo.url}
173-
alt={alt}
174-
ref={ref as unknown as React.Ref<HTMLAnchorElement>}
175-
className={className}
176-
/>
177-
);
178-
},
179-
))();
168+
// unknown mime types or no mime type
169+
return (
170+
<LinkPlayer
171+
style={mergedStyle}
172+
src={mediaInfo.url}
173+
alt={alt}
174+
ref={ref as unknown as React.Ref<HTMLAnchorElement>}
175+
className={className}
176+
/>
177+
);
178+
}))();
180179

181180
interface PlayButtonProps {
182181
onClick: () => void;
@@ -227,7 +226,7 @@ const PlayButton: React.FC<PlayButtonProps> = ({ onClick, isPlaying }) => {
227226
};
228227

229228
const ImageRenderer = /* @__PURE__ */ (() =>
230-
React.forwardRef<
229+
forwardRef<
231230
HTMLImageElement,
232231
Pick<
233232
MediaRendererProps,
@@ -266,7 +265,7 @@ const ImageRenderer = /* @__PURE__ */ (() =>
266265
}))();
267266

268267
const VideoPlayer = /* @__PURE__ */ (() =>
269-
React.forwardRef<
268+
forwardRef<
270269
HTMLVideoElement,
271270
Pick<
272271
MediaRendererProps,
@@ -393,7 +392,7 @@ const VideoPlayer = /* @__PURE__ */ (() =>
393392
}))();
394393

395394
const AudioPlayer = /* @__PURE__ */ (() =>
396-
React.forwardRef<
395+
forwardRef<
397396
HTMLAudioElement,
398397
Pick<
399398
MediaRendererProps,
@@ -504,7 +503,7 @@ const AudioPlayer = /* @__PURE__ */ (() =>
504503
* @internal Exported for tests
505504
*/
506505
export const IframePlayer = /* @__PURE__ */ (() =>
507-
React.forwardRef<
506+
forwardRef<
508507
HTMLIFrameElement,
509508
Omit<
510509
MediaRendererProps,
@@ -574,7 +573,7 @@ export const IframePlayer = /* @__PURE__ */ (() =>
574573
* @internal Exported for tests
575574
*/
576575
export const LinkPlayer = /* @__PURE__ */ (() =>
577-
React.forwardRef<
576+
forwardRef<
578577
HTMLAnchorElement,
579578
Pick<MediaRendererProps, "src" | "alt" | "style" | "className">
580579
>(function Link_Player({ src, alt, style, className }, ref) {

0 commit comments

Comments
 (0)