How to I get hot module reloading to work in a typescript monorepo

user_3104399 0
Viewed 2741

So I've been trying for the last few days completely in vain to get hot module reloading working in my Typescript/React/Koa/Mongo based monorepo; I feel like I've been banging my head against a brick wall. The documentation for HMR is pitiful (almost everything on the internet only goes part of the way of explaining how to do something). I've done a lot of googling and read lots of different ... similar versions of my problem, but nobody seems to have a useful solution.

I've put together a minimal repo version of the problem: https://github.com/benwainwright/hmr-issue-minimal-repo, that is roughly how my project is set up:

  • packages/one is a Yarn workspace containing the backend code
  • packages/two is a Yarn workspace containing the React components/frontend code

If I build this and run it, I can sometimes get it to notice that I'm trying to do a hot reload in the client, fail, and then do a complete page reload. When that happens, the following error appears on the console

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

I've tried all sorts of different combinations of the various packages and I've also swapped the code that does the hotswap (https://github.com/benwainwright/hmr-issue-minimal-repo/blob/edcd8ad8c4fb9686abce12237d51a5b6f37dd636/packages/two/renderApp.tsx#L13-L16) with react-hot-loader. Nothing works. If anyone has any idea how to get this working, I'll be eternally greatful!

hot-module-replacement monorepo webpack typescript
1 Answers

There are several things that you need to apply in order for react-hot loader to work.

  1. Apply "react-hot-loader/babel" in your babel plugins
  2. Make alias of react-dom to @hot-loader/react-dom
  3. Wrap you App root component with hot hoc which comes from react-hot-loader/root

These steps are basic use-case of React HMR based on https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript.

The thing is that your case is a bit more complicated since your front-end app is located in a node_modules, and by default babel doesn't compiles modules inside node_modules, therefore you need to specify that you want to compile them.

You can read the explanation inside my answer here: Use Webpack HMR with a hoisted Lerna React Project

user_65393170
Related