Vercel integration doesn't work with Vercel Functions

[chungweileong94]

By following the steps of Vercel integration, it only pull the corresponding .env file during the build process, which mean that the Vercel Functions will not able to access the .env during the runtime.

The workaround that I know is to use the deprecated Vercel integration instead, as it will insert all the ENV values into Vercel's Enviroment Variables settings.

These are the stack that I tested on Vercel

• Remix (https://remix.run/docs/en/v1/guides/envvars#production)
• ViteJS with Vercel Function

[motdotla]

Interesting, we're looking into this.

[motdotla]

@chungweileong94 does Vite have a concept of public ENVs - simlar to NEXT_PUBLIC_ or REACT_APP_ ?

At first look, it looks like Vercel Funtions permit public ENVs but not standard ones when including a .env on build.

[chungweileong94]

@motdotla Yes, vite does have it, and it works perfectly fine, as it will bundle everything during the build time. Just that the Vercel Function doesn't seems to support .env file.

[motdotla]

Can you try putting a public ENV (with Vite's mechanism to preface it) in your .env? I think Vercel's functions respect that at the moment - since functions are sort of front-end (though sort of not I will admit).

On Fri, Aug 12, 2022, at 4:41 PM, Chung Wei Leong wrote:

@motdotla https://github.com/motdotla Yes, vite does have it, and it works perfectly fine, as it will bundle everything during the build time. Just that the Vercel Function doesn't seems to support .env file.

— Reply to this email directly, view it on GitHub https://github.com/dotenv-org/dotenv-vault/issues/113#issuecomment-1213592385, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAA6CCHHCRW2VHSEH4HDQLVY3OKZANCNFSM56IMKU5Q. You are receiving this because you were mentioned.Message ID: @.***>

[motdotla]

@chungweileong94 did that do the trick to unblock you?

[chungweileong94]

@motdotla Tried that, doesn't seem to work. All of the ENVs that I used in Vercel function seems to be empty.

[chungweileong94]

@motdotla Here's one of my small projects that was built with Remix(With Vercel), which doesn't work with the Vercel integration. https://github.com/chungweileong94/social-linker

[motdotla]

Ok, a few things we've learned so far. Do these line up with what you are seeing:

1. In local development, ANY environment variable in your .env file is made available to middleware.ts files
2. In dev/branch/production environment on Vercel, only environment variables in your .env file prefaced with NEXT_PUBLIC_ are made available to middleware.ts files
3. In dev/branch/production environment on Vercel, any Vercel created (from their interface rather than injected by Dotenv) are made available to middleware.ts files

It seems that Vercel treats functions almost like front-end code. It strips out any environment variables not prefaced with NEXT_PUBLIC_. Does this line up with what you are seeing?

..

It looks like in Next you could do the following. Does Remix have a similar webpack config mechanism?

1. Add dotenv to your package.json yarn add dotenv
2. Edit your next.config.js

const result = require('dotenv').config()

const nextConfig = {
  reactStrictMode: true,
  env: result.parsed,
  compiler: {
    removeConsole: true // prevents envs from leaking into front-end unless compiled and used by front-end
  }
}

module.exports = nextConfig

[motdotla]

I added a discussion here to ask Vercel. https://github.com/vercel/next.js/discussions/39705

[chungweileong94]

Ok, a few things we've learned so far. Do these line up with what you are seeing:

1. In local development, ANY environment variable in your .env file is made available to middleware.ts files
2. In dev/branch/production environment on Vercel, only environment variables in your .env file prefaced with NEXT_PUBLIC_ are made available to middleware.ts files
3. In dev/branch/production environment on Vercel, any Vercel created (from their interface rather than injected by Dotenv) are made available to middleware.ts files

It seems that Vercel treats functions almost like front-end code. It strips out any environment variables not prefaced with NEXT_PUBLIC_. Does this line up with what you are seeing?

..

It looks like in Next you could do the following. Does Remix have a similar webpack config mechanism?

1. Add dotenv to your package.json yarn add dotenv
2. Edit your next.config.js

const result = require('dotenv').config()

const nextConfig = {
  reactStrictMode: true,
  env: result.parsed,
  compiler: {
    removeConsole: true // prevents envs from leaking into front-end unless compiled and used by front-end
  }
}

module.exports = nextConfig

It seems to be the case. Unfortuanaly, I don't think Remix has such option, not that I know of.

[motdotla]

Ok, I will personally try out remix and work on alternatives. In the meantime, keep using the deprecated Vercel integration. We will be keeping it around.

[motdotla]

@chungweileong94 try the new Integrate Everywhere™ functionality with Vercel's functions. As long as Vercel allows you to package and read files with their functions then it should work.

https://www.dotenv.org/docs/tutorials/integrations

[chungweileong94]

@chungweileong94 try the new Integrate Everywhere™ functionality with Vercel's functions. As long as Vercel allows you to package and read files with their functions then it should work.

https://www.dotenv.org/docs/tutorials/integrations

Ah cool, I will try it ASAP.

[motdotla]

Also, here is a specific Remix tutorial: https://www.dotenv.org/docs/integrations/vercel/remix.html

[chungweileong94]

@motdotla It works! Cool stuff👍