svelte component wont access .env

Question

So ive been able to get this to work before but im getting this error when trying to access an API while hiding the key

i was hoping to run everything in this one svelte component to make life easier

<script>
import 'dotenv/config';
const API_KEY = process.env.API_KEY;

// Fetch the data when the component is created
async function fetchData() {
    const res = await fetch(`https://api.sportmonks.com/v3/football/leagues?api_token=${API_KEY}`);
  const data = await res.json();
  return data.data;
}

let leagues = [];
async function load() {
  leagues = await fetchData();
}

// Initialize the data when the component is created
$: {
  load();
} 
</script> 

{#each leagues as league}
   <div>{league.name}</div>
{/each}

here is my error

Bob Fanger · Accepted Answer · 2023-01-01 23:59:12Z

2

You can't use a hidden key inside a *.svelte file, code running in frontend components is always public.

When you're using SvelteKit you can use $env/static/private or $env/dynamic/private inside +page.server.js & +server.js files inside the src/routes/ folder.

These files run on (as the name implies) on the server and have access to private environment variables.

import { API_KEY } from '$env/static/private';

Then make the api call on the server and return the results as data/props.

edited Jan 1, 2023 at 23:59

answered Jan 1, 2023 at 11:18

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

svelte component wont access .env

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related