File Upload fails mid request w/ error action has no response

[bsmoran620]

Hi! I'm working on a user profile page where the user can view and upload a new avatar image. I built a image to S3 upload feature based on this example: https://github.com/remix-run/examples/blob/main/file-and-s3-upload/app/utils/s3.server.ts

However, when I make the changes I see my action succeeds in uploading the file but crashes before I update the database and can set the avatarURL. I can confirm the file successfully makes it to S3. When debugging, I can see the file get uploaded and correctly returning the s3 file URL. Then in composeUploadHandlers line 23 it hits return value;

Next my debugger is jumping to reouter.cjs.js line 3967:

invariant(result !== undefined, "You defined " + (type === "action" ? "an action" : "a loader") + " for route " + ("\"" + match.route.id + "\" but didn't return anything from your `" + type + "` ") + "function. Please return a value or `null`.");

And it seems to think my loader in _app.tsx route doesn't return anything:

export async function loader({ request }: LoaderFunctionArgs) {
  const user = await authenticator.isAuthenticated(request, {
    failureRedirect: '/login',
  });

  return json({ user });
}

Here is my s3 utility file under app/utils/aws/s3.ts:

const uploadStream = ({ Key }: Pick<AWS.S3.Types.PutObjectRequest, "Key">) => {
  const s3 = new AWS.S3({ region: AWS_REGION });
  const pass = new PassThrough();
  return {
    writeStream: pass,
    promise: s3.upload({ Bucket: AWS_S3_AVATAR_BUCKET, Key, Body: pass }).promise(),
  };
};

export async function uploadStreamToS3(data: any, filename: string) {
  const stream = uploadStream({
    Key: filename,
  });
  await writeAsyncIterableToWritable(data, stream.writeStream);
  const file = await stream.promise;
  return file.Location;
}

export const s3ImageUploadHandler: UploadHandler = async ({
  name,
  filename,
  data,
}) => {
  if (name !== "img") {
    return undefined;
  }
  const uploadedFileLocation = await uploadStreamToS3(data, filename!);
  return uploadedFileLocation;
};

And the action and loader from my user profile route _app.users.$id.tsx:

export async function loader({ request, params }: LoaderFunctionArgs) {
  await authenticator.isAuthenticated(request, {
    failureRedirect: '/login',
  });
  
  const account = await db.User.findFirst({
    where: { id: Number(params.id) },
  });

  const avatarUrl = await getPresignedUrl(account.avatarUrl.split("/").at(-1));

  return json({
    account,
    avatarUrl,
  });
}

export const action = async ({ request, params }: ActionFunctionArgs) => {
  await authenticator.isAuthenticated(request, {
    failureRedirect: '/login',
  });

  const uploadHandler: UploadHandler = composeUploadHandlers(
    s3ImageUploadHandler,
    createMemoryUploadHandler() // createFileUploadHandler()
  );
  const formData = await parseMultipartFormData(request, uploadHandler);
  const imgSrc = formData.get("imgSrc");
  if (!imgSrc) {
    return json({ errorMsg: "Something went wrong while uploading file" });
  }

  await db.User.update({
    where: { id: params.id },
    data: {
      avatarUrl: imgSrc,
    },
  });

  return json({ imgSrc });
}

At first I thought it might be an issue with file size, so I tried swapping out createMemoryUploadHandler for createFileUploadHandler but no luck. I checked all my routes loaders and can't find any missing a return statement. My thought is that either the request is timing out while waiting for the file upload and I need to extend that timeout. I also tried renaming the s3 utility from s3.ts to s3.server.ts thinking maybe that could be causing it. Or maybe I'm missing an intricacy of route and somehow composeUploadHandlers is returning a value it shouldn't be? But I'm new to Remix so any pointer or ideas would be greatly appreciated!