Create-React-App: файл .env не анализируется правильно

Question

Мой проект CRA не анализирует переменные среды.Я вижу это в документах:

По умолчанию у вас будет определен NODE_ENV для вас, а также любые другие переменные среды, начинающиеся с REACT_APP_

А вот код для тестирования:

// .env in the project root folder
REACT_APP_GOOGLE=google.com
REACT_APP_API_POST_URL=http://localhost:4000/api/

// App.js
import dotenv from 'dotenv';

  componentDidMount() {
    if (dotenv.error) {
      console.log('dotenv.error', dotenv.error);
    } else { console.log('dotenv.parsed', dotenv.parsed); // undefined
    }
  }


// App.js insider render()
<button
   onClick={e => {
   e.preventDefault();
   console.log("process.env", process.env); // 
// {NODE_ENV: "development", PUBLIC_URL: ""}
// NODE_ENV: "development"
// PUBLIC_URL: ""             
console.log("process.env.NODE_ENV", process.env.NODE_ENV); // development               
console.log("process.env.REACT_APP_GOOGLE", process.env.REACT_APP_GOOGLE); // undefined
    }}
    >log .env</button>

Кто-нибудь знает, почему он не анализирует переменные env?

Answer 1

Из кода, который вы дали, кажется, что вы забыли вызвать функцию config (если вы ее не показывали).Если вы хотите, чтобы ваш .env был реализован, вам нужно будет сделать следующее на верхнем уровне вашего проекта:

import dotenv from 'dotenv';
// Load ENV vars
const dotEnvOptions = {
    path: 'env/dev.env' //Example path relative to your project folder
}

dotenv.config(dotEnvOptions)

Чтобы выяснить, что идет не так, вы можете включить ведение журнала, чтобы помочь отладкепочему некоторые ключи или значения не устанавливаются так, как вы ожидаете:

dotenv.config({ debug: true })

Оттуда, если путь / переменная не распознана, она будет напечатана на консоли:

Если вы ничего не видите, это означает, что ваш путь неверный или код не выполняется

Answer 2

Вот ваш компонент:

import React, { Component } from 'react';
import './App.css';

const googleEnvVariable = process.env.REACT_APP_GOOGLE;

class App extends Component {
  render() {
    return <div className="App">{googleEnvVariable}</div>;
  }
}

export default App;

А вот ваш .env

REACT_APP_GOOGLE=hereisyourenvvar

Вы должны увидеть здесьisouourenvvar

РЕДАКТИРОВАТЬ: обновленный ответ для отображения наэкран вместо console.log ...