En mi aplicación React, tengo una clave API vinculada a una variable:

 import React, { useState, useEffect } from 'react' import WeatherCard from './WeatherCard'; export default function Weather() { const apiKey = process.env.REACT_APP_API_KEY; // API KEY BOUND HERE const [forecastObj, setForecastObj] = useState({}); console.log(apiKey) //DID IT BIND SUCCESSFULLY? useEffect(() => { fetch(`https://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${zipCode}&days=3&aqi=no&alerts=no`) .then(reply => reply.json()) .then( json => { setForecastObj(json); setisLoading(false); }) }, [apiKey]) // Setting "days" to the array containing daily forecasts const days = forecastObj.forecast.forecastday; return ( <div className="container"> {days.map((day, index) => { return( <WeatherCard key={index} day={day} /> ) })} </div> ) }

Ejecutar npm start localmente devuelve la clave API en la consola y muestra correctamente la aplicación en el navegador .

Esto es para una clase, y mi instructor insiste en que el secreto del repositorio de GitHub es todo lo que se necesita para que mi código use la clave. Configuré un secreto de entorno y un secreto de repositorio que contiene la clave (uno tras otro cuando el primero no funcionó, no recuerdo cuál probé primero).

Cuando comienzo una acción de compilación en GitHub para implementarla en Firebase, se completará correctamente y se podrá acceder a la página/aplicación, pero mostrará una pantalla en blanco con un retorno undefined en la consola (desde la línea console.log(apiKey); ), junto con el error:

 Uncaught TypeError: r.forecast is undefined Weather.jsx:39:15 u Weather.jsx:39 React 8 S scheduler.production.min.js:13 T scheduler.production.min.js:14 813 scheduler.production.min.js:14 Webpack 12

La consola de desarrollo de Mozilla también proporciona el error: GET https://api.weatherapi.com/v1/forecast.json?key=undefined&q=97232&days=3&aqi=no&alerts=no

Esto me dice que la clave API no se está usando, pero cuando mi instructor usó la misma configuración (aplicación React alojada en Firebase, secreto en secretos del repositorio) para representar una etiqueta de versión de la aplicación usando el código:

Version: {process.env.REACT_APP_VERSION}

... aparece.

Hasta ahora, he intentado configurar las funciones de Firebase para mantener la clave, pero la mitad de los recursos que encontré sobre el tema (me metí un poco en la madriguera del conejo) no parecen aplicarse a una aplicación React simple.

Entonces, ¿qué estoy haciendo mal?