Solución:
Algunos pasos y notas que deberían resolver su problema:
console.log(process.env) siempre imprimirá un objeto vacío
Para ver si realmente funciona, debe imprimir las variables directamente, p. Ej. console.log(process.env.API_URL).
Asegúrese de que .env. * Esté en su carpeta raíz
En otras palabras, su jerarquía de carpetas debería verse así:
.env.development
.env.production
src/
pages/
index.js
No necesita prefijar GATSBY_ si desea acceder a las variables env del lado del servidor
De los documentos:
Además de estas Variables de entorno del proyecto definidas en archivos .env. *, También puede definir OS Env Vars. OS Env Vars que tienen el prefijo GATSBY_ estarán disponibles en el navegador JavaScript.
Necesita el prefijo GATSBY_ * si los está usando en el lado del navegador
El prefijo es solo si usa el enfoque OS Env Vars (es decir, los configura directamente en su servidor y no en estos archivos .env).
Mata y reinicia gatsby develop cuando haya agregado el (los) archivo (s) .env
Me encontré con esto al reproducir en CodeSandbox (en CodeSandbox, puede reiniciar yendo al Panel de control del servidor a la izquierda y haciendo clic en Reiniciar Sandbox).
Aquí está el ejemplo de trabajo: https://codesandbox.io/s/jj8xzn2y15
Quizás valga la pena señalar que es fácil nombrar mal el archivo si está acostumbrado a escribir .dev o .develop.
Gatsby requiere que el archivo tenga un nombre exacto: .env.development
Asegúrate de haber incluido
require (“dotenv”). config ({ruta:
.env.${process.env.NODE_ENV},})
en su archivo gatsby-config.js antes de comenzar a usar sus variables ENV.