Реагировать на переменные среды .env return undefined

Вероятно, вам нужно будет вызвать в dotenv.config(), как предлагает документ

Если вы используете приложение create-response-app, вам не нужен пакет dotenv. Вам нужно будет добавить префикс REACT_APP_ к имени переменной в файле .env. См. Документ здесь

Здесь следует отметить три вещи

1. переменная должна быть с префиксом с REACT_APP_

   например: REACT_APP_WEBSITE_NAME=hello

2. Вам необходимо рестарт на сервере, чтобы отразить изменения.

3. Убедитесь, что у вас есть файл .env в папке корень (там же, где у вас package.json), а НЕ в папке src.

После этого вы можете получить доступ к переменной, например, process.env.REACT_APP_SOME_VARIABLE

Дополнительные советы

1. Не нужно заключать значение переменной в одинарные или двойные кавычки.
2. Не ставьте точку с запятой ; или запятую , в конце каждой строки.

Подробнее здесь (мой собственный пост) и официальный документы

Привет, спасибо, парень, что я сделал и работал, так это создал файл 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

Затем я импортирую где угодно в компоненте и получаю свои данные.

Еще одна возможная ловушка, в которую я попал, заключалась в том, чтобы определить переменные не в папке create-react-app, а в папке выше (где находится Node server / backend .env). Убедитесь, что вы не делаете этого, потому что вы потратите драгоценное время, как я сделал сегодня.

• Убедитесь, что вы использовали префикс REACT_APP для каждой переменной.

• Убедитесь, что имена переменных в файле .env совпадают с именами в
  . ваш файл js. Например, REACT_APP_KEY в .env по сравнению с process.env.REACT_APP_KY

• Если сервер разработки был запущен, остановите его, а затем перезапустите, используя npm Начни это. Я действительно боролся с этим (переменная - неопределенная ошибка).
• Каждый раз, когда вы обновляете файл .env, вам нужно останавливать сервер и перезапустите его, так как переменные среды обновляются только во время сборки (переменная - неопределенная ошибка).
• Удалите цитаты из значений переменных.

// Wrong: 
REACT_APP_KEY=”AHEHEHR”

// Right:
REACT_APP_KEY=AHEHEHR

• Добавьте префикс REACT_APP_ в переменные среды React.

  apiKey: process.env.REACT_APP_API_KEY
  

• Убедитесь, что файл .env находится в корневом каталоге.

  src/
  .env
  .gitignore
  package.json
  package-lock.json
  

• После внесения изменений в файл .env перезапустите сервер разработки.

• Скопируйте только значение внутри кавычек и не забудьте удалить запятые в конце (это преследовало меня несколько часов). Эти примеры выдадут вам ошибку.

  REACT_APP_API_KEY=Ach2o1invVocSn25FcQhash209,
  REACT_APP_API_KEY = "Ach2o1invVocSn25FcQhash209",
  REACT_APP_API_KEY = "Ach2o1invVocSn25FcQhash209"
  

Если приведенные выше решения не работают для вас, проверьте, где находится ваш файл ".env". Как и в моем случае, все, что я сделал правильно, но ошибка в том, что я поместил ".env" вне каталога моего проекта, из-за чего я получаю сообщение об ошибке.

Примечание. Ваш файл ".env" должен находиться в том же каталоге, что и ваш "package.json".

попробуйте также очистить кеш.

npx react-native start --reset-cache

1. перезапустите vscode (закройте проект, закройте редактор)
2. открой это снова
3. запустить проект

В моем случае это очень помогает. Также не забудьте начать имя вашего ключа с REACT_APP_YOUR_NAME_KEY

ИСПРАВИТЬ:

в babel.config.js, если вы используете необязательную конфигурацию:

    {
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    }]
  ]
}

вы должны затем импортировать:

import {API_URL, API_TOKEN} from "@env"

вместо того:

import {API_URL, API_TOKEN} from "react-native-dotenv"

само описание Пакет NPM имеет это несоответствие

НЕ СОХРАНЯЙТЕ И НЕ ИСПОЛЬЗУЙТЕ КЛЮЧИ API ВО ФРОНТЕНДНОМ КОДЕ, ПОСКОЛЬКУ ЭТО ЛЕГКО ПРОЧИТАЕТСЯ С ПОМОЩЬЮ ИНСТРУМЕНТОВ DEV

Сохранение ключей API в .env и их использование в приложении React по-прежнему будет незащищенным, поскольку ключ API можно прочитать из DevTools.

Используйте простой бэкэнд-код, который будет действовать как прокси для вашей службы.

Отправьте необходимые данные через запрос, а затем серверная часть должна использовать эти данные, включая ключ API, хранящийся на сервере, а затем сделать запрос какой-либо конкретной службе, которой нужен этот ключ API.

Не нужно ставить префикс REACT_APP_, просто определите свою среду -

• если вы находитесь в среде разработки (запуск npm), вы должны добавить переменную среды в .env.development, например - API_URL=http://example.com
• если вы находитесь в производственной среде, обновление .env должно работать

Затем используйте то же самое в своем файле JS, что и process.env.API_URL

Примечание: Я тестировал это на React JS v16.8

Решение:
1. Удалите двойные кавычки. ("...").
2. Префикс Должен быть REACT_APP для каждой переменной.

Правильно:

REACT_APP_API_URL=http://localhost:8002

Надеюсь, это сработает.

при вызове переменной .env из файла JS вам нужно вызвать его по префиксу process.env., прежде чем записывать переменную .env

таким образом это будет выглядеть как process.env.REACT_APP_NOT_SECRET_CODE

и не забудьте начать имя переменной с префикса REACT_APP_, как упоминалось в предыдущих ответах, иначе React проигнорирует его по соображениям безопасности.

Если вы используете dev-сервер на локальном хосте, знайте, что .env здесь не работает, вам необходимо развернуть веб-сайт на «обычном» сервере, это причина безопасности, чтобы не позволять браузеру видеть .env при постановке.