Using netlify edge functions with nuxt3 netlify_edge preset

[dbzx10299]

I have a site hosted on netlify and am using Nuxt 3. I was using the npm run generate command and I had in my nuxt file structure a netlify directory with edge functions (/netlify/edge-functions/foo.js).

I wanted to move away from SSG and start using SWR and leveraging the cache so rather than pre-rendering the entire site I set the netlify build command to npm run build. This requires the nitro config to be set a bit differently as documented in the netlify docs for using nuxt on netlify:

Nuxt 3 introduces new rendering options, such as server-side rendering (SSR). SSR is supported when you deploy Nuxt 3 to Netlify, but requires configuration when you use Edge Functions.

In my nuxt.config.ts file I set this up

export default defineNuxtConfig({
  nitro: {
    preset: 'netlify_edge'
  }
})

Now when I run this edge function from /netlify/edge-functions/foo.js

export default async (req, context) => {
  return Response.json({ msg: 'foo' })
}

export const config = {
  path: '/foo'
}

I get an error

GET https://my-site.com/foo 404 (Not Found)

It seems this is happening because the nuxt pages directory is scanned and the pages are being served. If there would be a page bar.vue (/pages/bar.vue)

<script setup>

</script>

<template>
  <h1>bar page</h1>
</template>

It appears that this page is being served from the edge which is pretty cool. But how can I set this up that my edge functions in /netlify/edge-functions/foo.js still work?

Another interesting thing is that when the build command runs on netlify, it shows that the edge functions are bundled. When the nitro netlify_edge preset is used though, trying to fetch foo fails since it isn‘t a page. Also running netlify dev works as I would expect, so something here must be happening with the nitro output that I don't understand.

I can see here in the source code what is going on, but I don't get why I can't hit the edge function as an endpoint.

export const netlifyEdge = defineNitroPreset({
  extends: "base-worker",
  entry: "#internal/nitro/entries/netlify-edge",
  exportConditions: ["netlify"],
  output: {
    serverDir: "{{ rootDir }}/.netlify/edge-functions/server",
    publicDir: "{{ rootDir }}/dist",
  },
  rollupConfig: {
    output: {
      entryFileNames: "server.js",
      format: "esm",
    },
  },
  unenv: {
    polyfill: ["#internal/nitro/polyfill/deno-env"],
  },
  hooks: {
    "rollup:before": (nitro: Nitro) => {
      deprecateSWR(nitro);
    },
    async compiled(nitro: Nitro) {
      await writeHeaders(nitro);
      await writeRedirects(nitro);

      // https://docs.netlify.com/edge-functions/create-integration/
      const manifest = {
        version: 1,
        functions: [
          {
            path: "/*",
            name: "nitro server handler",
            function: "server",
            generator: `${nitroPkg.name}@${nitroPkg.version}`,
          },
        ],
      };
      const manifestPath = join(
        nitro.options.rootDir,
        ".netlify/edge-functions/manifest.json"
      );
      await fsp.mkdir(dirname(manifestPath), { recursive: true });
      await fsp.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
    },
  },
})