title: Svelte framework: environment variables not appearing in svelte app
body: <p>I'm trying to use environment variables in my svelte app. I've installed <code>@Rollup/plugin-replace</code> and <code>dotenv</code>. I created a <code>.env</code> file to hold my <code>API_KEY</code> and added the following to <code>plugins</code> in <code>rollup.config.js</code> from this <a href="https://medium.com/@firthous.dev/how-to-setup-env-variables-to-your-svelte-js-app-c1579430f032" rel="nofollow noreferrer">Medium article</a>:</p>
  <pre><code>plugins: [
    replace({
      __myapp: JSON.stringify({
        env: {
          isProd: production,
          API_URL : process.env.API_URL
        }
      }),
    }),
  ]
  </code></pre>
  <p>and in the svelte components of my app I would access my API key via</p>
  <pre><code>const apiUrl = __myapp.env.API_URL
  </code></pre>
  <p>which worked. However, a few days later I was having authentication issues and after some debugging I found that <code>__myapp.env.API_URL</code> was returning <code>undefined</code> by trying to print it to the console.</p>
  <p>I then tried changing the <code>replace</code> call to just <code>replace({'API_KEY': process.env.API_KEY})</code> and <code>console.log(API_KEY)</code> was still displaying <code>undefined</code>. I tested <code>replace</code> 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 <code>process.env.API_KEY</code> but I'm not sure. What might I be doing wrong with my attempts to access my environment variables?</p>
  <p>(Some background: I am using <a href="https://github.com/sveltejs/template" rel="nofollow noreferrer">sveltejs/template</a> as a template to build my app)</p>