Cannot use @vercel/blob in Edge runtime

[yuriyyakym]

Whereas everything works fine locally while vercel dev, it throws an error when I try to deploy my function using vercel deploy:

Error: The Edge Function "api/pronunciation" is referencing unsupported modules:
	- @fastify: node:stream
	- undici: stream, net, http, tls, querystring, stream/web, util/types, worker_threads, zlib, perf_hooks, console, url, diagnostics_channel

I have found the following comments in this repository:

storage/packages/blob/src/client.ts

Lines 4 to 7 in 8b1ff23

	// When bundled via a bundler supporting the `browser` field, then
	// the `undici` module will be replaced with https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
	// for browser contexts. See ./undici-browser.js and ./package.json
	import { fetch } from 'undici';

and

storage/packages/blob/src/undici-browser.js

Lines 1 to 8 in 8b1ff23

	// this file gets copied to the dist folder
	// it makes undici work in the browser by reusing the global fetch
	// it's the simplest way I've found to make http requests work in Node.js, Serverles Functions, Edge Functions, and the browser
	// this should work as long as this module is used via Next.js/Webpack
	// moving forward we will have to solve this problem in a more robust way
	// reusing https://github.com/inrupt/universal-fetch
	// or seeing how/if cross-fetch solves https://github.com/lquixada/cross-fetch/issues/69
	export const fetch = globalThis.fetch.bind(globalThis);

---

Am I missing any config to make vercel deploy use the browser version file?

[luismeyer]

hey @yuriyyakym,
i can't reproduce the issue, running on next@14.0.3 and @vercel/blob@0.16.1 (i tried a simple put and list). Can you describe the steps how to reproduce the issue?

[yuriyyakym]

Hey, I do not use next for this project. I needed to create a small single-endpoint project. I even had to create a fake public directory, otherwise it rejects the deployment.

My config files:

vercel.json

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "mkdir -p public && touch public/empty",
  "functions": {
    "api/pronunciation.ts": {
      "memory": 128,
      "maxDuration": 5
    }
  }
}

package.json

{
  "dependencies": {
    "@vercel/blob": "^0.16.1",
    "jose": "^5.2.0"
  },
  "devDependencies": {
    "@vercel/edge": "^1.1.1"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./api",
    "target": "es6",
    "lib": ["ESNext", "DOM"],
    "module": "NodeNext",
    "strict": false,
    "noEmit": true
  }
}

And then I just imported and used @vercel/blob in my pronunciation.ts. If I remove that import and its usage, the function can be properly deployed.

[luismeyer]

it seems like, there is currently no way to tell vercel deploy to use the browser fetch inside @vercel/blob. We are currently planning to remove undici from the sdk (#534). This is WIP because we still want to support Node 16, but we are working on a solution.

For now, I unfortunately only see two options for you:

1. don't run on edge
2. use headless next.js (Because next.js has an additional bundling step, it works here)

[yuriyyakym]

Thank you for the detailed response!