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)

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
– 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
– mtruong1999, Commented Jul 21, 2020 at 4:34

Carlos Roso · Accepted Answer · 2020-07-21 11:41:24Z

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

answered Jul 21, 2020 at 11:41

Carlos Roso

1,5151 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vishal Tanna Over a year ago

production is not defined in rollup.config.js

Collectives™ on Stack Overflow

Svelte framework: environment variables not appearing in svelte app

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related