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
last year
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?

arielariallast year

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
last year
maybe try and
rm -Rf .next

Next may be caching something
arielariallast year
testing right now

same error :/

I looked in lock file, and sharp is listed as a dependency of payload
jmikrut
last year
ok i've spotted the issue. on a fix now
arielariallast year
nice! thank you, james!

does it help if I open an issue?
jmikrut
last year
nahh already fixed

bout to push
arielariallast year
ahahahahahah oh, ok!

that was fast
jmikrut
last year
and done

you can update next-payload

you might have to
rm -Rf .next
again
arielariallast year
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

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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