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 ponents 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)

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 ponents 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)

• javascript
• environment-variables
• svelte
• rollupjs

Share Improve this question Follow asked Jul 21, 2020 at 1:18 mtruong1999mtruong1999 12911 silver badge1111 bronze badges 2

• 1 i'm not familiar with svelte but gonna take a wild guess that maybe you only need to stringify the env variable values. so something like: __myapp: { env: { isProd: JSON.stringify('production') } } – Abdul Ahmad Commented Jul 21, 2020 at 1:22
• @duxfox-- Hmm, just gave that a shot but did not work. Thank you for your response. – mtruong1999 Commented Jul 21, 2020 at 4:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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({ ... })
   ]
}