Svelte framework: environment variables not appearing in svelte app

Question

I'm trying to use environment variables in my svelte app. I've installed @Rollup/plugin-replace and dotenv. I created a .env file to hold my API_KEY and added the following to plugins in rollup.config.js from this Medium article:

plugins: [
  replace({
    __myapp: JSON.stringify({
      env: {
        isProd: production,
        API_URL : process.env.API_URL
      }
    }),
  }),
]

and in the svelte components of my app I would access my API key via

const apiUrl = __myapp.env.API_URL

which worked. However, a few days later I was having authentication issues and after some debugging I found that __myapp.env.API_URL was returning undefined by trying to print it to the console.

I then tried changing the replace call to just replace({'API_KEY': process.env.API_KEY}) and console.log(API_KEY) was still displaying undefined. I tested replace by trying to use it replace some variable with some string and it worked so that confirms that rollup is working fine. So, I suspect the problem is in process.env.API_KEY but I'm not sure. What might I be doing wrong with my attempts to access my environment variables?

(Some background: I am using sveltejs/template as a template to build my app)

Answer 1

dotenv won't register your .env vars until you call config, that's why process.env.API_KEY is undefined when you try to access it.

In your rollup.config.js you can do:

import { config as configDotenv } from 'dotenv';
import replace from '@rollup/plugin-replace';

configDotenv();

export default {
   input: 'src/main.js',
   ...
   plugins: [
    replace({
      __myapp: JSON.stringify({
        env: {
          isProd: production,
          API_URL: process.env.API_URL,
        },
      }),
    }),
    svelte({ ... })
   ]
}