[Cloudflare R2] Nuxt config type error: blob property 'binding' is missing in type

[davidstackio]

When defining blob with Cloudflare R2, there is a type error in nuxt.config.ts if binding is not defined.

// leads to type error
blob: {
  driver: 'cloudflare-r2',
  bucketName: 'xyz',
},

Type Error

Type '{ driver: "cloudflare-r2"; bucketName: string; }' is not assignable to type 'BlobConfig | undefined'.
  Type '{ driver: "cloudflare-r2"; bucketName: string; }' is not assignable to type 'CloudflareR2BlobConfig'.
    Property 'binding' is missing in type '{ driver: "cloudflare-r2"; bucketName: string; }' but required in type 'CloudflareDriverOptions'.

The runtime error is: R2 binding "undefined" when visiting the path the blob is being served at.

However, when binding: 'BLOB' is added to the config, the type error goes away, but the runtime error becomes R2 binding "BLOB" not found when trying to serve it. This happens in dev, but I have not tried to deploy to Cloudflare workers yet.

The runtime error happens when I try to serve the blob at /api/blob/[...path].get.ts:

import { blob } from '@nuxthub/blob'

export default defineEventHandler(async (event) => {
  const pathParam = event.context.params?.path
  const pathname = decodeURIComponent(pathParam)

  return blob.serve(event, pathname)
}

So either the binding not being a default is a bug, or the documentation needs updated so the type error doesn't show up.

Note: when using blob: true (.data local file system), everything works as expected in dev.

I am using @nuxthub/core v0.10.8.

Expected behavior

According to the docs the binding should be automatically detected:

blob: {
  driver: 'cloudflare-r2',
  binding: 'BLOB' // optional, defaults to 'BLOB'
}

Current workaround

Set nuxt config to:

hub: {
  blob: true,
}

Then set the S3/R2 environment variables in .env.local to connect to my R2 in dev.

Note that the above workaround only works locally. For a production ready deploy, use this instead:

hub: {
    blob: import.meta.env.NODE_ENV === 'development'
      ? true
      : {
          binding: 'BLOB',
          driver: 'cloudflare-r2',
          bucketName: process.env.BLOB_BUCKET_NAME,
        },
  },

And set BLOB_BUCKET_NAME in your Cloudflare build variables.

[davidstackio]

Wondering if these are related?
#870
#871

I'm not using D1 for the db (postgres + hyperdrive instead), but wondering if the r2 binding in dev is because of how Nuxt handles the wrangler.json.

[davidstackio]

This might also be related: #847

[davidstackio]

Looks like this may fix this and related issues: PR #787