reactjs - Får API-nyckeln som odefinierad

Följande är komponenten där jag försöker göra anropet, det är i initialt tillstånd, så jag testade bara API-anropet, men efter att jag har ställt in miljövariabeln får jag API-nyckeln som undefined...

Följande är hela komponenten...

import { useEffect, useState } from "react";
import brick from "./assets/tamland.webp";
import BrickSays from "./BrickSays";
import { location } from "./helper";

const APP_KEY = import.meta.env.REACT_APP_API_KEY;
console.log(APP_KEY);

const WeatherData = () => {
  const weatherStackAPI = `http://api.weatherstack.com/current?access_key=${APP_KEY}&query=${location}`;
  console.log(weatherStackAPI);

  const [apiResponse, setResponse] = useState<unknown>();

  const fetchWeather = async () => {
    const promise: Response = await fetch(weatherStackAPI);
    const rawData: any = await promise.json();
    setResponse(rawData);
    console.log(rawData);
  };

  useEffect(() => {
    fetchWeather();
  }, []);

  console.log(apiResponse);

  return (
    <>
      <BrickSays />
      <img src={brick} alt='I love lamp' height='500px' />
    </>
  );
};

export default WeatherData;

Följande är .env-filen;

REACT_APP_API_KEY = appkey

Jag försökte med .env-filen både inuti och utanför "src"-mappen men utan resultat, och jag har använt vite för projektets skapande.

Jag förväntar mig att få API-nyckeln som en sträng åtminstone

Svar #1

Om du använder vite för ditt projekt, då bör du göra

const APP_KEY = import.meta.env.VITE_API_KEY

Att lägga till REACT_APP framför din miljövariabel är mest tillämpligt på ett create-react-app-projekt.

Se dessutom till att din .env-fil finns i roten av ditt projekt och att miljövariabeln är sparad som:

VITE_API_KEY=YOUR_API_KEY