web-dev-qa-db-fra.com

réagir aux variables d'environnement .env renvoie undefined

Je crée une application React et j'ai besoin de récupérer les données de mon API, maintenant je veux stocker l'URL de l'API en tant que variable d'environnement. J'ai mon fichier .env, j'ai dotenv installé, voici mon code process.env.API_URL revient indéfini.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from '../src/components/Home'
import dotenv from  'dotenv'
import path from 'path'


class App extends Component {
  render() {
    console.log(process.env.API_URL)
    return (
      <div>
        <Home/>
      </div>
    );
  }
}

export default App;
reactjsundefined
8
David whyte

Trois choses à noter ici

  1. la variable doit être préfixée avec REACT_APP_
  2. Vous devez redémarrer le serveur pour refléter les modifications.
  3. Assurez-vous que vous avez le fichier .env dans votre dossier racine (même endroit où vous avez votre package.json) et NON dans votre dossier src.

Après cela, vous pouvez accéder à la variable comme ceci process.env.REACT_APP_SOME_VARIABLE

En savoir plus ici

20
kiranvj

Vous devrez probablement appeler dotenv.config() comme suggéré par le document

Si vous utilisez create-react-app, vous n'avez pas besoin du package dotenv. Vous devrez ajouter REACT_APP_ préfixe du nom de la variable dans .env fichier. Voir le document ici

5
tingxuanz

Un autre piège possible dans lequel je suis tombé a été de définir les variables non pas sous le dossier create-react-app mais au-dessus (où se trouve le Node server/backend .env). Assurez-vous de ne pas ne le faites pas parce que vous perdrez un temps précieux, comme je l'ai fait aujourd'hui.

0
CyberMessiah

Hé merci mec ce que j'ai fait et travaillé a été de créer un fichier config.js

 const dev={
    API_URL:"http://localhost:300"
}

const prod={
    API_URL:"llll"
}
const config=process.env.NODE_ENV=='development'?dev:prod
export default  config

Ensuite, j'importe où peut-être dans un composant et j'obtiens mes données.

0
David whyte