How can I use process.env (or equivalent) during development?

[rorymcd98]

My vite.config.ts looks like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'
import dotenv from 'dotenv';
dotenv.config();

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(process.env.GOOGLE_MAPS_API_KEY),
  },
  plugins: [
    // EnvironmentPlugin(['GOOGLE_MAPS_API_KEY']),
    crx({manifest}),
  ],
  worker: {
    plugins: [
      react()
    ]
  },
  root: './',
  build: {
    emptyOutDir: true,
    target: 'chrome88',
    assetsDir: 'extension-frontend/src/assets',
    manifest: false,
  },
  server: {
    open: 'public/popup.html'
  }
})

The background script module I'm trying to execute looks like this:

import dotenv from 'dotenv';
dotenv.config();

// Restricted to 2500 requests per day
var GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY;

export default async function fetchGeoCode(address: string): Promise<any> {
  const formattedAddress = address.split(', ').join('+');
  const geocodeApiUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${formattedAddress}&key=${GOOGLE_MAPS_API_KEY}`;

  try {
    const response = await fetch(geocodeApiUrl);
    if (!response.ok) {
      throw new Error(`Failed to fetch geocode data, HTTP status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    throw new Error('Failed to fetch geocode data, received error: ' + error);
  }
}

I have tried a couple of rollup plugins to try get the process.env statements to convert to the development api key. I have now tried define.

In both cases I get an error in my service worker:

Uncaught ReferenceError: process is not defined

Is there some different process I must use for crxjs?

[lcds90]

Hi @rorymcd98, I was facing the same issue so I did some research on vite docs and I am getting use with import.meta.env.VITE_[key]

At the moment it is working in development mode, but at least it is not saying that it is not defined

[rorymcd98]

Hey I think in the end I just used a plain env.ts or env.json file and imported from that. Not ideal but it worked for my use case.

[JoeyDoey]

I think that should be fine. But the ✌️official✌️ Vite way to do it would be to use either of:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

So for local dev you'd have a .env.local file in root with something like:

VITE_SOME_KEY=123
DB_PASSWORD=foobar

where you can then use the vars like:

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

• Ref: Vite docs - .env Files

[rorymcd98]

@JoeyDoey @lcds90 Actually looking at my code I wonder if the problem is the order of my imports.

It might be that I should import and configure dotenv before importing crx.