Как заставить горячую перезагрузку модуля работать в монорепозитории машинописного текста - PullRequest
Новая
       120

Как заставить горячую перезагрузку модуля работать в монорепозитории машинописного текста

2 голосов
/ 29 мая 2020

Итак, последние несколько дней я совершенно напрасно пытался заставить горячую перезагрузку модуля работать в моем монорепозитории на основе Typescript / React / Koa / Mon go; Такое ощущение, что я бился головой о кирпичную стену. Документация для HMR жалка (почти все, что касается inte rnet, идет только часть способа объяснения, как что-то делать). Я много гуглил и читал много разных ... похожих версий моей проблемы, но, похоже, ни у кого нет полезного решения.

Я собрал минимальную версию проблемы репо: https://github.com/benwainwright/hmr-issue-minimal-repo, примерно так и настроен мой проект:

  • packages/one - это рабочая область Yarn, содержащая код серверной части
  • packages/two is рабочее пространство Yarn, содержащее компоненты React / код внешнего интерфейса

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

｢hot｣ Error: Aborted because ../two/renderApp.tsx is not acceptedUpdate propagation: 
../two/renderApp.tsx -> ../two/index.tsx -> ./src/frontend-entry-point.tsx -> 1    at 
hotApplyInternal (http://localhost/assets/app.js:508:30)    at Object.hotApply [as apply] 
(http://localhost/assets/app.js:362:19)    at eval (webpack-internal:///./node_modules/webpack-hot- 
client/client/hot.js:121:23)

Я пробовал всевозможные комбинации различных пакетов, а также поменял местами код, выполняющий горячую замену (https://github.com/benwainwright/hmr-issue-minimal-repo/blob/edcd8ad8c4fb9686abce12237d51a5b6f37dd636/packages/two/renderApp.tsx#L13 -L16 ) с react-hot-loader . Ничего не работает. Если у кого-нибудь есть какие-нибудь идеи, как заставить это работать, я буду бесконечно велик!

1 Ответ

0 голосов
/ 30 мая 2020

Есть несколько вещей, которые вам нужно применить для того, чтобы react-hot loader работал.

  1. Примените «react-hot-loader / babel» в ваших плагинах babel
  2. Сделайте псевдоним от react-dom до @hot-loader/react-dom
  3. Оберните компонент приложения root с помощью hot ho c, который происходит от react-hot-loader/root

Эти шаги базовый c вариант использования React HMR на основе https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript.

Дело в том, что ваш случай немного сложнее, поскольку ваше интерфейсное приложение находится в node_modules, и по умолчанию babel не компилирует модули внутри node_modules, поэтому вам нужно указать, что вы хотите их скомпилировать.

Вы можете прочитать объяснение внутри моего ответа здесь: Use Webpack HMR с поднятым Lerna React Project

...