Почему axios не подтягивает process.env.BASE_URL от Heroku?

Question

[Nikita Shchypylov]

Всем привет.
У меня в Реакт проекте есть такой конфиг axios'a:

import axios from 'axios';

const axiosInstance = axios.create({
	baseURL: process.env.BASE_URL || "/api",
});

axiosInstance.interceptors.response.use(res => {
	return res;
}, err => {
	return Promise.reject(err);

});

export default axiosInstance;

Как видно, если есть переменная BASE_URL, то использую её. Локально использую .env файл, при деплое использую heroku переменную :

Но почему-то она не используется на проде (то есть, когда захожу на heroku выполняется второе условие "/api")
В чем может быть проблема? Переменная для базы данных работает :)
Спасибо.

Comments

[yanis_kondakov]

Как переменную получаете?

[Nikita Shchypylov]

yanis_kondakov, Не уверен, но подозреваю что после билда она как-то подтягивается из Heroku.

[yanis_kondakov]

Nikita Shchypylov, я потому и задал, чтобы вы заглянули в документацию. У Heroku достаточно хорошо все описано)

[Nikita Shchypylov]

yanis_kondakov, Прочитал. Ответа на вопрос не нашел.

Whenever you set or remove a config var using any method, your app is restarted and a new release is created.

- Пробовал менять, удалять - ставить - не помогло

[Aleksei Podgaev]

Nikita Shchypylov, она подтягивается не после билда, а во время. В скомпилированной версии этой переменной нет - вместо неё должно быть значение. Именно поэтому при изменении переменных запускается пересборка.

Answer 1

[Aleksei Podgaev]

React используется для SSR или только клиент?
Переменная окружения присутствует на сервере, а не в браузере, где исполняется код реакта. Для того, чтобы всё работало, нужно при сборке проекта это учитывать (распарсить код и вставить вместо вызовов переменных их значения). Если вы посмотрите create-react-app - там это уже настроено как надо.