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

default discord avatar
arielarial
4 weeks ago
27

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
  • discord user avatar
    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?

  • default discord avatar
    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)
  • discord user avatar
    jmikrut
    Payload Team
    3 weeks ago

    maybe try and

    rm -Rf .next


    Next may be caching something

  • default discord avatar
    arielarial
    3 weeks ago

    testing right now



    same error :/



    I looked in lock file, and sharp is listed as a dependency of payload

  • discord user avatar
    jmikrut
    Payload Team
    3 weeks ago

    ok i've spotted the issue. on a fix now

  • default discord avatar
    arielarial
    3 weeks ago

    nice! thank you, james!



    does it help if I open an issue?

  • discord user avatar
    jmikrut
    Payload Team
    3 weeks ago

    nahh already fixed



    bout to push

  • default discord avatar
    arielarial
    3 weeks ago

    ahahahahahah oh, ok!



    that was fast

  • discord user avatar
    jmikrut
    Payload Team
    3 weeks ago

    and done



    you can update next-payload



    you might have to

    rm -Rf .next

    again

  • default discord avatar
    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.