webpack - Cum fac să funcționeze reîncărcarea modulului la cald într-un monorepo TypeScript

Așadar, am încercat în ultimele câteva zile, complet în zadar, să fac ca reîncărcarea modulului la cald să funcționeze în monorepo-ul meu bazat pe Typescript/React/Koa/Mongo; simt că mi-am dat cu capul de un zid. Documentația pentru HMR este jalnică (aproape tot ce se găsește pe internet explică doar parțial cum să faci ceva). Am căutat mult pe Google și am citit multe versiuni diferite... similare ale problemei mele, dar nimeni nu pare să aibă o soluție utilă.

Am creat o versiune minimă a depozitului pentru problemă: https://github.com/benwainwright/hmr-issue-minimal-repo, astfel arată aproximativ cum este configurat proiectul meu:

  • packages/one este un workspace Yarn care conține codul backend
  • packages/two este un workspace Yarn care conține componentele React/codul frontend

Dacă construiesc asta și îl rulez, uneori pot să-l fac să observe că încerc să fac un reload rapid în client, să eșueze și apoi să facă un reload complet al paginii. Când se întâmplă asta, următoarea eroare apare în consolă

｢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)

Am încercat tot felul de combinații diferite ale diverselor pachete și, de asemenea, am înlocuit codul care face hotswap-ul (https://github.com/benwainwright/hmr-issue-minimal-repo/blob/edcd8ad8c4fb9686abce12237d51a5b6f37dd636/packages/two/renderApp.tsx#L13-L16) cu react-hot-loader. Nimic nu funcționează. Dacă cineva are vreo idee cum să fac asta să funcționeze, îi voi fi etern recunoscător!

Răspuns #1

Există câteva lucruri pe care trebuie să le aplici pentru ca react-hot loader să funcționeze.

  1. Aplică „react-hot-loader/babel” în pluginurile tale Babel
  2. Creează un alias pentru react-dom către @hot-loader/react-dom
  3. Înfășurați componenta rădăcină a aplicației dvs. cu hot hoc care provine din react-hot-loader/root

Acești pași sunt un caz de utilizare de bază al React HMR bazat pe https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript.

Problema este că cazul tău este puțin mai complicat deoarece aplicația ta front-end se află într-un node_modules, și în mod implicit babel nu compilează modulele din interiorul node_modules, prin urmare trebuie să specifici că vrei să le compilezi.

Poți citi explicația în răspunsul meu de aici: Folosește Webpack HMR cu un proiect React Lerna ridicat