[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

AvinashOP•5w 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•5w ago

What uploadthing versions are you using?

AvinashOP•5w ago

"uploadthing": "^7.3.0", "@uploadthing/expo": "^7.1.1",

markr•5w ago

hmm ok, going to play around with this in a little bit to see if I can repro

AvinashOP•5w 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

markr•4w ago

https://discord.com/channels/966627436387266600/1102510616326967306/1310085891179544579

Gaming

Programming

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