Переменные среды не работают во вложенном файле JS (React)

Question

Я пытаюсь использовать переменные окружения в create-реагировать-приложение.

Я добавил в REACT_APP_ все переменные в моем файле .env и установил / потребовал dotenv.

Однако я подозреваю, что причина, по которой мои значения .env не читаются, заключается в том, что скрипт, из которого я их вызываю, не находится в корневой папке, где находится мой файл .env.

Ниже приведен краткий обзор структуры моего проекта

ROOT: .env VIEWS (folder): view.js

Я пытаюсь получить доступ к переменным .env в view.js, вызывая process.env.REACT_APP_MYVAR, но он либо не возвращает значение, либо возвращает что-то, что не является строкой (это ошибка, которую выдает мой API, но это может быть потому, что этот вызов возвращается undefined)

Это известная проблема или я могу как-нибудь это исправить? Я мог бы просто взять сценарий из этой папки и поместить его в корень моего приложения, но я бы предпочел, чтобы структура приложения была согласованной

Answer 1

удалить dotenv.Вот мой git-repo для доступа к REACT_APP_KEY.скажите, решит ли это вашу проблему.

git-repo

Answer 2

Измените .env на .env.development.local

На самом деле .env также работает, но если у вас есть другой файл .env.*, он переопределит .env,

.env как минимумПриоритет в create-реагировать-приложение

, если вы запускаете проект с npm start, этот файл .env.development.local переопределит другие env файлы

Приоритет выглядит следующим образом,Форма слева направо

npm start: .env.development.local, .env.development, .env.local, .env

Answer 3

Вам не нужно «устанавливать / требовать» dotenv. Если вы используете create-реакции-приложение, эта функция доступна без дополнительной установки.

Вы указываете, что .env находится в вашем корне, но я подозреваю, что на самом деле это не может быть в вашем корне. Судя по вашему описанию, это звучит так, как если бы он был в вашей корневой папке source , но файл .env находится в корневом каталоге вашего приложения (то есть в том же каталоге, что и ваш файл package.json).

Вот CodeSandbox (с использованием create-реагировать-приложение), который демонстрирует использование переменной среды во вложенном файле:

Содержимое этой песочницы включает в себя:

.env (в том же каталоге, что и ваш файл package.json)

REACT_APP_MYVAR=Here is my value for REACT_APP_MYVAR

src/index.js

import React from "react";
import ReactDOM from "react-dom";

import View from "./views/View";
function App() {
  return <View />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

src/views/View.js

import React from "react";
const View = () => {
  return <div>My Var: {process.env.REACT_APP_MYVAR}</div>;
};
export default View;

Результат рендеринга:

My Var: вот мое значение для REACT_APP_MYVAR

Переменная окружения может использоваться в любом из исходных файлов js независимо от уровня вложенности.

Если это не помогло с вашей проблемой, пожалуйста, покажите точное содержание ваших .env и view.js.