NextJS 13, middlware and process not found on netlify dev

Support
,
1

Hi,

i just started going all in with a NextJS 13 project and the new features. But the problem i have is most likely not related to v13 but also with v12. And it works without problems on Netlify cloud and with “yarn dev” (nextjs local).

But netlify dev fails with:

◈ Loaded edge function next-dev
[next-dev] ReferenceError: process is not defined
    at createMiddlewareSupabaseClient2 (file:///Users/ml/development/projects/nextjs/with-tailwindcss-app/.netlify/middleware.js#0:7823:7)

I have a middlware.js in my project which basically imports some supabase classes for getting a supabase client. Its from their supabase-nextjs-auth package. Inside this packge, the code tries to lookup some api keys via process.env. But as the error points out, there is no process variable.

This is the code / line in question from the library put into the netlify generated middlware.js file:

function createServerComponentSupabaseClient({
      headers,
      cookies,
      cookieOptions
    }) {
      if (!process.env.NEXT_PUBLIC_SUPABASE_URL || !process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
        throw new Error("NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY env variables are required!");
      }
...
}

So my question. This netlify generated (and flattened) middleware.js doesnt work as expected because there is some node runtime problem. Perhaps node isnt even used here.

So is anyone aware of problems with this kind of setup? I cant be the first one who is using middlware with libraries which uses process.env to get variables from the environment. As soon as i remove the supabase library, netlify dev works as expected.

Thanks for any help here.

3

Hey @logemann,

There’s a bug filed for your issue here: process.env not polyfilled for Edge Functions in CLI · Issue #1864 · netlify/next-runtime · GitHub. You can track that issue.