Environment variables in Remix template with Edge Functions

I created a new remix project using the netlify template: npx create-remix@latest --template netlify/remix-template followed by the rest of the setup in the readme.

When I run netlify dev I have to access env vars using process.env but when I use netlify server or run in production then Netlify.env.get() (or even Deno.env.get()) works as expected.

In my mind the expected behavior is that using Netlify.env.get() should work when using netlify dev but the error I get is “ReferenceError: Netlify is not defined”.

My current solution is to conditionally retrieve my env vars:

let ENV: Record<string, string> = {}

if (tyepof Netlify === undefined) {
  ENV = {
    FOO: process.env.BAR
  }
} else {
  ENV = {
    FOO: Netlify.env.get('BAR')
  }
}

export { ENV }

Separate but related issue: When referencing Netlify.env.get() I’m getting a “Cannot find name ‘Netlify’” error. I see the global decleration in "node_modules/@netlify/edge-functions/node/dist/bootstrap/globals" but I think the tsconfig might be misconfigured? Also the include property in the tsconfig has “netlify-edge-plugin.ts” which doesn’t seem to exist anywhere.

Sorry for the delay. Does process.env not work in production?

Currently what you’ve described sounds like expected behaviour from our end. When you run netlify dev, Netlify simply invokes a proxy server which proxies the requests to your application server, in this case, Remix. Remix doesn’t know about the Netlify global, it works with process.env. When you run netlify serve, Remix is no longer involved and Netlify mimics the production environment which has the Netlify global.

From what I’ve seen with other frameworks, process.env gets transpiled into the required code or some polyfills are included which ensure you don’t have to write any Netlify-specific code. You should write the framework-specific code and rest should be automatically handled for you.