Как сделать глобальную переменную в REACT?

Каждый раз делать импорт не особо радует, но пока ваш вариант на первом мест.

Иван Павленко, как бы в этом и суть билдера - нет ничего "глобального". Но если нужно глобально, вы можете в main.js сделать

// main.js
import { variable } from './globals';

window.variable = variable;

и далее использовать переменную глобально. Но знайте, что это вредный совет

Иван Павленко, но зато потом когда окажется что апи много и их надо переключать легко сделаешь:
const restApiHost = (function(){
if hui {
return pizda
}
return dzigurda
}())

Вебпак девайн же тупо заменить все ___host___ на строку и хрен переключшь потом.

Алексей Николаев, например на апи внутри докер контейнера, вне докер контейнера. Интерфейсы jopa и vazelin появятся перед внезапным показом проекта заказчику.

grinat, интерфейсы jopa и vazelin уже и так появились =)
Вебпак плагины вызвали отдельные боли, так как не ясно где их прописывать.
Ну а импорт константы и горячая замена как предложили вы тоже имеет свои недостатки, так как собранный проект превращает
js код и структуру файлов в кашу, и подобные фокус теряет свою актуальность.

Иван Павленко, не теряют они акутальности, элементарно, у заказчика не работает какая-то херь или наебнулась интеграция на одном из серверов, но нужно срочно показать новую фичу, которая работает на деве. То можно будет сделать например:
const restApiHost = (function(){
if localStorage.getItem('api') {
return localStorage.getItem('api')
}
return dzigurda
}())
И его попросить вбить в адресную строку: javascript:localStorage.setItem('api', 'sfsfsdf') и переключить на дев сервер где можно будет спокойно разобраться в проблеме. Если делать через dev.config, через define или через axios.defaults.baseURL = 'https://api.example.com' то такой вариант не проканает.

А что вы скажете насчет использования import config.js (как делаю я)? Это заодно позволяет мне делать сборки для различных окружений (config.dev.js и т.п.). А если нужного конфига нет, сборка просто не осуществится.

Алексей Николаев, да по-разному можно делать. В вашем случае это удобно если используется в одном месте:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
});

иначе придется везде писать импорты.

С definePlugin, точно так же, можно делать сборки для разных окружений.

В текущем проекте над которым работаю, вообще, так переменные окружения определяются:

var commonExternals = [{
  'Config': "var " + JSON.stringify({
    APP_GOOGLE: 'xxx',
    APP_APPLE: 'xxx',
    URL: "xxx",
    DOMAIN: "xxx",
    DOMAINS: {
      developers: "xxx",
      base: "xxx"
    }
  })
}];

module.exports = commonExternals;

И в конфиге:

module.exports = {
  //...
externals: [].concat(commonExtarnals)
};

Звучит красиво, а как прикрутить?
Желательно без eject.
Проект создан через npx create-react-app my-app, и сейчас перелапачивать сборку нет не сил не желания.

Иван Павленко, adding-custom-environment-variables