Next.js Discord

Discord Forum

TypeError t.reason.enqueueModel is not a function error when doing fetch on getSignedGetUrl

Answered
Havana posted this in #help-forum
Open in Discord
HavanaOP
I have a really strange error that only happens in production. When I try to navigate from a page to another page using a Link, I get a client error in one of the generated chunks by webpack with the error message from the title. This error does not happen when the URL is directly pasted into the browser address bar and if after it happened you refresh the page with F5, the page loads fine. And it also doesn't happen in local dev at all.

Through trial and error, I have found out that it is the following block of code that causes it:
   const logoUrl = await getSignedGetUrl(`organisations/${tournament.organisation.id}/logo.png`)
   if (logoUrl) {
      const response = await fetch(logoUrl)
      if (response) {
         logo = await response.arrayBuffer()
      }
   }


This block is run in the page.tsx in a server context before any JSX is returned, and is supposed to download a logo PNG image from S3, which is later passed into a component that prints some PDFs with it.

Would be grateful for any insights. next: 15.5.5 and @aws-sdk/client-s3: 3.911.0
Answered by Havana
I've given up on this and am now just getting the signed url on the server, passing it down to the client component and fetching it there
View full answer

5 Replies

@Havana I have a really strange error that only happens in production. When I try to navigate from a page to another page using a Link, I get a client error in one of the generated chunks by webpack with the error message from the title. This error does not happen when the URL is directly pasted into the browser address bar and if after it happened you refresh the page with F5, the page loads fine. And it also doesn't happen in local dev at all. Through trial and error, I have found out that it is the following block of code that causes it: typescript const logoUrl = await getSignedGetUrl(`organisations/${tournament.organisation.id}/logo.png`) if (logoUrl) { const response = await fetch(logoUrl) if (response) { logo = await response.arrayBuffer() } } This block is run in the page.tsx in a server context before any JSX is returned, and is supposed to download a logo PNG image from S3, which is later passed into a component that prints some PDFs with it. Would be grateful for any insights. next: 15.5.5 and @aws-sdk/client-s3: 3.911.0
Rottweiler
It sounds like the error is due to trying to fetch a signed S3 URL on the client when the code is meant to run server-side. In Next.js 15+, you can ensure this runs only on the server by using a fetch inside getServerSideProps or a server component, or by fetching the ArrayBuffer after checking typeof window === "undefined". For example:

let logo: ArrayBuffer | undefined;
if (typeof window === "undefined") {
  const logoUrl = await getSignedGetUrl(`organisations/${tournament.organisation.id}/logo.png`);
  if (logoUrl) {
    const response = await fetch(logoUrl);
    if (response.ok) logo = await response.arrayBuffer();
  }
}


This avoids client-side fetch issues when navigating via Link.
HavanaOP
It is in a server component (it's in the main page.tsx in app router). I have changed it to this, but it's still giving the same problem:
const command = new GetObjectCommand({
   Key: `organisations/${tournament.organisation.id}/logo.png`,
   Bucket: Resource.Bucket.name,
})
const client = new S3Client({})
const logoResponse = await client.send(command)
const logo = await logoResponse.Body?.transformToByteArray()

I then pass the logo Uint8Array<ArrayLike> down to client components. Maybe this is the problem? Should I just fetch the signed url on the server, pass that down, and fetch the object on the client?
@alfonsüs ardani what was the error message?
HavanaOP
TypeError: t.reason.enqueueModel is not a function
HavanaOP
I've given up on this and am now just getting the signed url on the server, passing it down to the client component and fetching it there
Answer