Yarn Workspaces And Webpack Hot Module Reloading React App

Question

I am using Yarn Workspaces to manage a mono repo. I am using webpack 4 for hot module reloading. In my mono repo I have an app, a UI component library, and another component library for authorizing users (auth package). I am using the component library in both the app and the auth package. Everything local to the app hot reloads fine, but the UI component library will not hot reload - it requires a full refresh.

I've tried accepting the UI component library using module.hot.accept(...), but doesn't seem to pick it up.

Guessing this question is a stretch, but any ideas?

Scoliosis

How's your component library set up? I usually set my component's library to compile via babel and run webpack only on the app for bundling. – Pamulapan

Check if webpack is ignoring node_modules from watch. In workspaces, the referenced component lib package would end up in node_modules so you may want to include it in the watch. Of-course I am assuming that you are running separate webpack bundlers for your component library and your app, so when you modify the component code, it is bundled on the fly into its node_modules package folder. – Olmos

@pizza-r0b Did you manage to solve this problem? I'm having the same question and looking for the solution. – Antevert

@Antevert no unfortunately – Scoliosis

I'm interested in a solution as well, so far no luck... – Valenti

Answer 1

Add --hot in your package.json dev build script. It works for webpack 4.

Null