Can't use imageSizes on Media collection with next-payload?

arielarial

4 weeks ago

Hi everyone! So, I was getting errors trying to get my Media collection to work with next-payload.

I found that it was because of

imageSizes

. When I add this prop to the collection, the Media creation fails with the following error:

TypeError: Cannot read properties of undefined (reading 'resize')
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:66367:73
    at step (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:377:23)
    at Object.next (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:318:20)
    at asyncGeneratorStep (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:21:28)
    at _next (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:39:17)
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:44:13
    at new Promise (<anonymous>)
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:36:16
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:66416:49
    at Array.map (<anonymous>)
[14:00:03] ERROR (payload): FileUploadError: There was a problem while uploading the file.
    at new ExtendableError (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:54432:23)
    at FileUploadError._createSuperInternal (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:292:30)
    at new APIError (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:54446:31)
    at FileUploadError._createSuperInternal (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:292:30)
    at new FileUploadError (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:54559:31)
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:65965:35
    at step (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:377:23)
    at Object.throw (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:318:20)
    at asyncGeneratorStep (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:21:28)
    at _throw (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:42:17)

Steps to reproduce:

- clone next-payload-demo

- yarn add @google-cloud/storage

- follow plugin-cloud-storage docs to replace s3 adapter with gcs adapter

- update cloudStorage config

- update env vars (and .env.example)

- run yarn build

[ everything working so far ]

- add imageSizes to "media" collection

imageSizes: [
      {
        name: "thumbnail",
        width: 200,
        height: 200,
        crop: "centre",
      },
    ],

[ throws error ]

Repo:

https://github.com/arieltonglet/gcs-next-payload-demo

jmikrut
Payload Team
3 weeks ago
hey @arielarial — good question!

actually, you have to
opt-in
to allowing Sharp usage within
next-payload
. This is for a few reasons:

1. Sharp is a big dependency, and to try and keep our serverless function bundles as small as possible, we remove it by default

2. the
next/image
component pretty much does everything that Sharp's
imageSizes
can, so Sharp is somewhat unnecessary

but

i think it should work if you just specify
imageSizes

automatically

what's the error?

arielarial

3 weeks ago

this makes sense

the error I'm getting is this:

TypeError: Cannot read properties of undefined (reading 'resize')
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:66367:73
    at step (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:377:23)
    at Object.next (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:318:20)
    at asyncGeneratorStep (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:21:28)
    at _next (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:39:17)
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:44:13
    at new Promise (<anonymous>)
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:36:16
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:66416:49
    at Array.map (<anonymous>)
[14:00:03] ERROR (payload): FileUploadError: There was a problem while uploading the file.
    at new ExtendableError (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:54432:23)
    at FileUploadError._createSuperInternal (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:292:30)
    at new APIError (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:54446:31)
    at FileUploadError._createSuperInternal (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:292:30)
    at new FileUploadError (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:54559:31)
    at /[...]/gcs-next-payload-demo/.next/server/chunks/996.js:65965:35
    at step (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:377:23)
    at Object.throw (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:318:20)
    at asyncGeneratorStep (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:21:28)
    at _throw (/[...]/gcs-next-payload-demo/.next/server/chunks/996.js:42:17)

jmikrut
Payload Team
3 weeks ago
maybe try and
rm -Rf .next

Next may be caching something
arielarial
3 weeks ago
testing right now

same error :/

I looked in lock file, and sharp is listed as a dependency of payload
jmikrut
Payload Team
3 weeks ago
ok i've spotted the issue. on a fix now
arielarial
3 weeks ago
nice! thank you, james!

does it help if I open an issue?
jmikrut
Payload Team
3 weeks ago
nahh already fixed

bout to push
arielarial
3 weeks ago
ahahahahahah oh, ok!

that was fast
jmikrut
Payload Team
3 weeks ago
and done

you can update next-payload

you might have to
rm -Rf .next
again
arielarial
3 weeks ago
nice, will do it

it's working now!

For some reason I couldn't update next-payload via yarn, not event when I deleted
node_modules
or with
--latest

But anyway I pasted your fix directly and it's working now. Thanks again, James!

Open the post

Continue the discussion in Discord

Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.