Vite React app with external API fails after deployment to Netlify hosting

[Gizmo_Funny]

I built a fitness tracking application using React and Vite, and I deployed it on Netlify. This app connects to external APIs for workout data and video content. Everything worked fine during local development, but after deploying, I’m encountering JavaScript errors.

The main issue I’m facing is the error e.slice is not a function. Upon checking the network tab in my browser, I discovered 403 status codes along with messages stating that I’m “not subscribed to API” from the external service.

const workoutApiConfig = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': import.meta.env.VITE_API_TOKEN,
    'X-RapidAPI-Host': 'fitness-exercises.p.rapidapi.com'
  }
};

const videoApiConfig = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': import.meta.env.VITE_API_TOKEN,
    'X-RapidAPI-Host': 'video-search-api.p.rapidapi.com'
  }
};

const getData = async (endpoint, config) => {
  const result = await fetch(endpoint, config);
  const jsonData = await result.json();
  return jsonData;
}

This code works perfectly in my local environment, but it fails on the live site. Has anyone else had similar issues with API authentication after deploying to Netlify?

[alexr1990]

yeah, your env vars aren’t being picked up on netlify. had this happen too - api gives back an error object instead of an array, so your code fails at .slice(). make sure you added VITE_API_TOKEN in netlify’s env variables, then rebuild. also, log the response to see what’s coming back.

[sophiac]

This looks like an environment variable problem mixed with poor error handling. Netlify doesn’t transfer your local .env file when you deploy (security reasons), so you’ll need to add VITE_API_TOKEN manually in your Netlify dashboard under Site settings. The e.slice is not a function error happens because your code expects an array from the API, but failed authentication returns an error object instead. I had the same issue with a movie API project. Fixed it by wrapping my fetch calls in try-catch blocks and checking the response structure before processing it. Also worth checking if your API key has usage limits that might be getting hit in production - some APIs have different rate limits depending on the environment.

[Hermione_Book]

Had this exact problem with my weather app on Netlify last month. That 403 error means your API key isn’t getting read properly in production. Check if you’ve added your environment variables in Netlify’s dashboard - go to Site settings > Environment variables. Make sure the variable name matches exactly what you have locally (VITE_API_TOKEN). The e.slice is not a function error happens because your code expects an array from the API, but when authentication fails, you’re getting an error object instead. Add some error handling to check the response status before processing the data. Just check if result.ok is true before calling result.json() - stops your app from crashing when the API returns errors.