почему мой env-файл с токеном личного доступа не работает в моем приложении реакции?

Question

Мое приложение реакции получает пользовательские данные из github с помощью graphql, а запросы выполняются с помощью маркера личного доступа в файле .env.

Мой .env файл находится в папке root моего проекта. Ключ находится слева, а значение ключа (токен личного доступа) справа:

.env файл: REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=xxxXXX

Мой код находится в файле App.js, который находится внутри папки component, которая находится внутри папки src. Путь к App.js -> ./src/components/App.js

Внутри моего App.js у меня есть следующий код в строках 6-10:

const axiosGitHubGraphQL = axios.create({
  baseURL: 'https://api.github.com/graphql',
  headers: {
    Authorization: `bearer ${process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN}`,
  },
});

С помощью этого кода я могу отправлять запросы на github, используя мой личный токен доступа, который находится внутри файла .env, но файл не работает.

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

Мое приложение реакции находится на github по ссылке: https://github.com/rvmelo/tech6-app

(ПРИМЕЧАНИЕ: я следовал первым шагам из учебника по этой ссылке: https://www.robinwieruch.de/react-with-graphql-tutorial/)

Answer 1

Эта функция автозагрузки .env - это react-scripts материал.

Поскольку вы используете webpack-dev-server для разработки, вы должны загрузить его вручную.

Вы можете использовать *Пакет 1008 * для этой цели.

const dotenv = require('dotenv').config({path: __dirname + '/.env'});

В разделе плагинов конфигурации webpack используйте

new webpack.DefinePlugin({
  "process.env": dotenv.parsed
}),

Подробнее: Как передать переменные файла .env в конфигурацию webpack?