Vercel with pnpm

Are you receiving the following error when using pnpm and dotenv preloading?

/path/to/node_modules/.bin/react-native:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list

Pnpm has a quirk when it comes to node preloading.

This tutorial shows you how to get around that quirk (see step 3). Otherwise, it is the same as the Vercel with NextJS tutorial.

1. Install dotenv

Install dotenv.

$ pnpm install dotenv

2. Preload dotenv

Preload NextJS scripts using dotenv. This will inject the environment variables ahead of NextJS.

"scripts": {
  "dev": "node -r dotenv/config ./node_modules/.bin/next dev",
  "build": "node -r dotenv/config ./node_modules/.bin/next build",
  "start": "node -r dotenv/config ./node_modules/.bin/next start",
  "lint": "node -r dotenv/config ./node_modules/.bin/next lint"
},

example

3. Add .npmrc

Here is the way to fix the quirk. Add a .npmrc file in the root of your project.

node-linker=hoisted

4. Run dotenv-vault build

Run npx dotenv-vault build to build your encrypted .env.vault file.

$ npx dotenv-vault build

5. Set DOTENV_KEY

Run npx dotenv-vault keys production.

$ npx dotenv-vault keys production
remote:   Listing .env.vault decryption keys... done

dotenv://:[email protected]/vault/.env.vault?environment=production

Visit your Vercel Project > Settings > Environment Variables.

Set DOTENV_KEY to the value returned above.

6. Commit and push

That’s it!

Commit those changes safely to code and push to Vercel.

When the build runs, it will recognize the DOTENV_KEY, decrypt the .env.vault file, and load the production environment variables to ENV. If a DOTENV_KEY is not set (like during development on your local machine) it will fall back to regular dotenv.

You will know it worked when you see the message ‘Loading env from encrypted .env.vault’.