Nitro build does not respects edge exports in package.json for workers

[ericfennis]

Environment

vercel-edge

Reproduction

Reproduction repo: https://github.com/ericfennis/nitro-vercel-og

Fork this repo and deploy it to Vercel to see in the logs that the function is crashed.

Describe the bug

@vercel/og together with Nitro is not working on the Vercel Edge environment dispite that config preset is set to vercel-edge.
Probably this is same issue on other worker environments.

Note: If your run the reproduction repo it is working locally.

Additional context

I deployed the reproduction repo on vercel: https://nitro-vercel-og.vercel.app/

The Vercel Egde function log:

Digging deeper into this I found out that the wrong entry file is included in the build.
fs is only include in the node entry file in the exports of the package.json. So I think if the Nitro preset is set to vercel-edge, netlify-edge or cloudflare. The package resolver should use worker or edge export in a package.json export.

The vercel OG package.json

{
  "name": "@vercel/og",
  "version": "0.5.11",
  "description": "Generate Open Graph Images dynamically from HTML/CSS without a browser",
  "type": "module",
  "main": "./dist/index.node.js",
  "types": "./dist/index.node.d.ts",
  "files": [
    "dist/**/*"
  ],
  "exports": {
    ".": {
      "edge": {
        "types": "./dist/index.edge.d.ts",
        "default": "./dist/index.edge.js"
      },
      "edge-light": {
        "types": "./dist/index.edge.d.ts",
        "default": "./dist/index.edge.js"
      },
      "browser": {
        "types": "./dist/index.edge.d.ts",
        "default": "./dist/index.edge.js"
      },
      "worker": {
        "types": "./dist/index.edge.d.ts",
        "default": "./dist/index.edge.js"
      },
      "workerd": {
        "types": "./dist/index.edge.d.ts",
        "default": "./dist/index.edge.js"
      },
      "import": {
        "types": "./dist/index.node.d.ts",
        "default": "./dist/index.node.js"
      },
      "node": {
        "types": "./dist/index.node.d.ts",
        "default": "./dist/index.node.js"
      },
      "default": "./dist/index.node.js"
    },
    "./package.json": "./package.json"
  },

Logs

No response

[Hebilicious]

@ericfennis I believe this was fixed in #1401 and you should be able to use it with nitropack-edge

[pi0]

Guide for using edge channel: https://nitro.unjs.io/guide/getting-started#edge-release-channel

Please let us know if it still doesn't works 👍🏼

[ericfennis]

@Hebilicious @pi0 Tnx for the quick replies, will check if it will work!

[ericfennis]

Hmm looks like it is reading the correct file now, tnx @pi0 @Hebilicious !

But I now get an error that it can't load the wasm file, but that hasn't to do with this issue.

Could not load /Users/eric.fennis/Development/nitro-vercel-og/node_modules/.pnpm/@[email protected]/node_modules/@vercel/og/dist/resvg.wasm?module
(imported by node_modules/.pnpm/@[email protected]/node_modules/@vercel/og/dist/index.edge.js): 
ENOENT: no such file or directory, open '/Users/eric.fennis/Development/nitro-vercel-og/node_modules/.pnpm/@[email protected]/node_modules/@vercel/og/dist/resvg.wasm?module'

[pi0]

@ericfennis Do you mind making a reproduction? 🙏🏼 (if you mind opening a new issue i wouldn't miss it!)

[ericfennis]

@pi0 Ok got the wasm file working now! But @vercel/og not yet.
With the Nitro config I provided below, by manually copying the wasm file to .vercel/output/functions/__nitro.func directory. And make the import "external". Rollup doesn't like the WASM imports.

The wasm file should be located in the function directory, see vercel docs

Should I make an issue for this configuration?

import copy from 'rollup-plugin-copy'

//https://nitro.unjs.io/config
export default defineNitroConfig({
  preset: 'vercel-edge',
  esbuild: {
    options: {
      // This was needed to get React ro work
      jsxFactory: 'React.createElement',
      jsxFragment: 'React.Fragment',
    },
  },
  rollupConfig: {
    external: [
      './yoga.wasm?module',
      './resvg.wasm?module',
      './noto-sans-v27-latin-regular.ttf'
    ],
    plugins: [
      copy({
        targets: [
          { src: './node_modules/@vercel/og/dist/yoga.wasm', dest: './.vercel/output/functions/__nitro.func' },
          { src: './node_modules/@vercel/og/dist/resvg.wasm', dest: './.vercel/output/functions/__nitro.func' },

          // Not sure about the TTF files yet
          { src: './node_modules/@vercel/og/dist/noto-sans-v27-latin-regular.ttf', dest: './.vercel/output/static' },
          { src: './node_modules/@vercel/og/dist/noto-sans-v27-latin-regular.ttf', dest: './.vercel/output/functions/__nitro.func' },
        ]
      })
    ]
  }
})

But the next error I have is that the TTF file from @vercel/og is not loading.

TypeError: Fetch API cannot load: file:///noto-sans-v27-latin-regular.ttf
    at (index.mjs:1:510109)
    at (__nitro:middleware.js:1:17)