fix: process.env polyfill issue in vite (#1993)

* fix: process.env crashing in vite

* fix: check if process is defined if vite polyfill not available

* chore: added .env.local.example for rainbowkit package

* fix: migrate to dotenv-cli for .env.local support

* chore: amend changeset

* revert: dotenv-cli, use dotenv config in build script for relative paths

* chore: update contributing.md

---------

Co-authored-by: Daniel Sinclair <d@niel.nyc>

.changeset/olive-goats-dance.md

@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Resolved an issue with the Enhanced Provider when using RainbowKit in Vite without a `process.env` polyfill

.github/CONTRIBUTING.md

@@ -16,6 +16,9 @@ This project uses [`pnpm`](https://pnpm.io) as a package manager. The required `
 
 ## Development environment
 
+You'll first need to specify Environment Variables at both [`packages/rainbowkit/.env.local`](../packages/rainbowkit/) and
+[`packages/example/.env.local`](../packages/example/). Reference `.env.local.example` for required variables.
+
 To play around with code while making changes, you can run the local development environment:
 
 ```bash
@@ -27,7 +30,7 @@ This will run an example app on [localhost:3000](http://localhost:3000) and the
 
 The example app code is located in [`packages/example`](../packages/example). The documentation site code is located in [`site`](../site). Make sure you clean up after yourself before pushing up any changes.
 
-All API changes should also include updates to [`README.md`](../README.md) and the documentation site. Documentation is crucial to helping developers of all experience levels use RainbowKit.
+All API changes should also include updates to the documentation site. Documentation is crucial to helping developers of all experience levels use RainbowKit.
 
 ## Coding standards
 
@@ -105,7 +108,7 @@ Each changeset defines which package(s) should be published and whether the chan
 
 To create a new changeset, run `pnpm changeset`. This will run the Changesets CLI, prompting you for details about the change. You’ll be able to edit the file after it’s created — don’t worry about getting everything perfect up front.
 
-Since we’re currently in beta, all changes should be marked as a minor/patch release to keep us within the `v0.x` range.
+All changes should be marked as a minor/patch release to keep us within the `v2.0` range.
 
 Even though you can technically use any markdown formatting you like, headings should be avoided since each changeset will ultimately be nested within a bullet list. Instead, bold text should be used as section headings.
 

package.json

@@ -56,7 +56,6 @@
     "@vanilla-extract/esbuild-plugin": "^2.3.5",
     "@vanilla-extract/vite-plugin": "^4.0.9",
     "autoprefixer": "^10.4.16",
-    "dotenv": "^16.4.5",
     "esbuild": "^0.20.2",
     "esbuild-plugin-replace": "^1.4.0",
     "ethers": "^5.6.8",
@@ -73,7 +72,8 @@
     "typescript": "5.4.2",
     "viem": "2.9.31",
     "vitest": "^0.33.0",
-    "wagmi": "^2.9.2"
+    "wagmi": "^2.9.2",
+    "dotenv": "^16.4.5"
   },
   "packageManager": "pnpm@9.1.1",
   "pnpm": {

packages/rainbowkit/.env.local.example

@@ -0,0 +1 @@
+RAINBOW_PROVIDER_API_KEY= # Required for Enhanced Provider

packages/rainbowkit/build.js

@@ -1,12 +1,14 @@
 import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
 import autoprefixer from 'autoprefixer';
-import 'dotenv/config';
+import { config } from 'dotenv';
 import * as esbuild from 'esbuild';
 import { replace } from 'esbuild-plugin-replace';
 import postcss from 'postcss';
 import prefixSelector from 'postcss-prefix-selector';
 import readdir from 'recursive-readdir-files';
 
+config({ path: '.env.local' });
+
 const isWatching = process.argv.includes('--watch');
 const isCssMinified = process.env.MINIFY_CSS === 'true';
 

packages/rainbowkit/package.json

@@ -61,7 +61,8 @@
     "nock": "^13.4.0",
     "postcss": "^8.4.32",
     "react": "^18.3.0",
-    "vitest": "^0.33.0"
+    "vitest": "^0.33.0",
+    "dotenv": "^16.4.5"
   },
   "dependencies": {
     "@vanilla-extract/css": "1.14.0",

packages/rainbowkit/src/core/network/enhancedProvider.ts

@@ -4,6 +4,9 @@ export const enhancedProviderHttp = createHttpClient({
   baseUrl: 'https://enhanced-provider.rainbow.me',
   headers: {
     'x-api-key':
-      process.env.RAINBOW_PROVIDER_API_KEY ?? '__rainbowProviderApiKey',
+      (typeof process !== 'undefined' &&
+        typeof process.env !== 'undefined' &&
+        process.env.RAINBOW_PROVIDER_API_KEY) ||
+      '__rainbowProviderApiKey',
   },
 });