Починить react-async-bootstrapper

[in19farkt]

Сейчас одновременное использование react-async-bootstrapper и реакт хуков может приводить к ошибке "Invariant Violation: Hooks can only be called inside the body of a function component".

Возможно будет достаточно обновить react-async-bootstrapper.

Как воспроизвести ошибку: внутри core/App/ClientApp добавляем хук useState.

[chmnkh]

Насколько я понимаю все пропало, и бутстраппер не будет работать с хуками. Грубо говоря, за то, что вызывается на хуках отвечают же рендерер-либы (реакт дом и всякое такое). А react-tree-walker, который бутстраппером юзается, берет и рендерит компоненту тупым вызовом метода или функциональной компоненты. Если подебажить с брейкпоинтом в рендере можно четко это увидеть.

Через дебаггер получил: вот тут на 165 строке вызывается рендер, а это как раз коллбэк с 278 строки, т.е. тупо вызывается функ. компонента, и никакие хуки при таком подходе в принципе не могут работать.

[in19farkt]

поищи в react-tree-walker и react-async-bootstrapper иши на эту тему, если там тишина, то оставь им ишьюс и кинь сюда ссылку на него.

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

[NikitaRzm]

Возьмите бустраппер с птички. react-tree-walker тот еще костыль, а руками можно запилить норм. У нас на птичке замечательно работает при том конструкция довольно простая. И выпилите этот вендор код - при том довольно говеный код :)

[in19farkt]

А там как-то это переписали? Я помню там руками на сервере мы запускали всякие асинхронные вещи, причем для всех раутов одинаковые.

[NikitaRzm]

Да, я перепилил, вот обвязка: https://gitlab.com/documents-project/order-form/blob/master/src/shared/helpers/bootstrap.tsx

Вот так используем: https://gitlab.com/documents-project/order-form/blob/master/src/features/ordersHistory/view/containers/OrdersHistory/OrdersHistory.tsx#L65

И в server.tsx также бутстрапим на отдельном дереве )

[in19farkt]

@NikitaRzm очень красиво сделано) Я когда искал решение даже не думал в сторону хока и контекста)) Точно нужно перетянуть этот код в стартер кит, возможно даже оформить отдельным npm-пакетом.

Я бы еще добавил возможность отловить факт того что ничего не бутстрапилось. Будет полезно при предзагрузке вложенных друг в друга асинхронных фич. Типа запускаем этот код в цикле пока не будет нулевая предзагрузка. Но в таком случае придется помнить о такой особенности, и в каждом getJobCreator придется делать проверку на то выполненна ли уже предзагрузка

[chmnkh]

@NikitaRzm

Да, я перепилил, вот обвязка: https://gitlab.com/documents-project/order-form/blob/master/src/shared/helpers/bootstrap.tsx

Вот так используем: https://gitlab.com/documents-project/order-form/blob/master/src/features/ordersHistory/view/containers/OrdersHistory/OrdersHistory.tsx#L65

И в server.tsx также бутстрапим на отдельном дереве )

у меня 404

доступа нету?