[React native expo + Express] Warning: TypeError: (maybeServerData ?? data)?.find is not a function

im using react native expo + express as backend services and im facing issues with the uploadButton. uploadButton.tsx
import { useImageUploader } from "@/libs/uploadthing";
import { openSettings } from "expo-linking";

export default function UploadButton() {
const { openImagePicker, isUploading } = useImageUploader("selfieUploader", {
onClientUploadComplete: () => Alert.alert("Upload Completed"),

onUploadError: (error) => Alert.alert("Upload Error", error.message),
});

return (
<View>
<Pressable
style={styles.button}
disabled={isUploading}
onPress={() => {
openImagePicker({
source: "camera", // or "camera"
onInsufficientPermissions: () => {
Alert.alert(
"No Permissions",
"You need to grant permission to your Photos to use this",
[
{ text: "Dismiss" },
{ text: "Open Settings", onPress: openSettings },
]
);
},
});
}}
>
<Text>{isUploading ? "Uploading..." : "Select Image"}</Text>
</Pressable>
</View>
);
}
import { useImageUploader } from "@/libs/uploadthing";
import { openSettings } from "expo-linking";

export default function UploadButton() {
const { openImagePicker, isUploading } = useImageUploader("selfieUploader", {
onClientUploadComplete: () => Alert.alert("Upload Completed"),

onUploadError: (error) => Alert.alert("Upload Error", error.message),
});

return (
<View>
<Pressable
style={styles.button}
disabled={isUploading}
onPress={() => {
openImagePicker({
source: "camera", // or "camera"
onInsufficientPermissions: () => {
Alert.alert(
"No Permissions",
"You need to grant permission to your Photos to use this",
[
{ text: "Dismiss" },
{ text: "Open Settings", onPress: openSettings },
]
);
},
});
}}
>
<Text>{isUploading ? "Uploading..." : "Select Image"}</Text>
</Pressable>
</View>
);
}
libs/uploadThing.ts
import { generateReactNativeHelpers } from "@uploadthing/expo";
import type { OurFileRouter } from "../../server/src/routes/fileUploadRoute";

export const { useImageUploader, useDocumentUploader } =
generateReactNativeHelpers<OurFileRouter>({
url: process.env.EXPO_PUBLIC_BACKEND_URL || "http://localhost:8000",
});
import { generateReactNativeHelpers } from "@uploadthing/expo";
import type { OurFileRouter } from "../../server/src/routes/fileUploadRoute";

export const { useImageUploader, useDocumentUploader } =
generateReactNativeHelpers<OurFileRouter>({
url: process.env.EXPO_PUBLIC_BACKEND_URL || "http://localhost:8000",
});
6 Replies
Avinash
AvinashOP3w ago
in backend this is how its
import { createUploadthing, type FileRouter } from "uploadthing/server";

const f = createUploadthing({
errorFormatter: (err) => {
console.log("Error uploading file", err.message);
console.log(" - Above error caused by:", err.cause);
return { message: err.message };
},
});

export const fileUploadRouter = {
selfieUploader: f({
image: {
maxFileSize: "4MB",
maxFileCount: 1,
},
})
.middleware(({ files }) => {
console.log("files", files);
return { uploadedBy: "user" };
})
.onUploadComplete(async ({ metadata, file }) => {
console.log("Selfie upload complete:", metadata, file.url);
return { url: file.url };
}),

export type OurFileRouter = typeof fileUploadRouter;
import { createUploadthing, type FileRouter } from "uploadthing/server";

const f = createUploadthing({
errorFormatter: (err) => {
console.log("Error uploading file", err.message);
console.log(" - Above error caused by:", err.cause);
return { message: err.message };
},
});

export const fileUploadRouter = {
selfieUploader: f({
image: {
maxFileSize: "4MB",
maxFileCount: 1,
},
})
.middleware(({ files }) => {
console.log("files", files);
return { uploadedBy: "user" };
})
.onUploadComplete(async ({ metadata, file }) => {
console.log("Selfie upload complete:", metadata, file.url);
return { url: file.url };
}),

export type OurFileRouter = typeof fileUploadRouter;
markr
markr3w ago
What uploadthing versions are you using?
Avinash
AvinashOP3w ago
"uploadthing": "^7.3.0", "@uploadthing/expo": "^7.1.1",
markr
markr3w ago
hmm ok, going to play around with this in a little bit to see if I can repro
Avinash
AvinashOP3w ago
update the issue is when im on mobile data , im not getting any errors (maybeServerData ) and this is causing "is failed to report event "upload" to uploadthing Server" to make api calls i have to have my devices on same WIFI, which is causing maybeServerData error
Want results from more Discord servers?
Add your server