How to trigger hot reloading for React when a package in node_modules is changed?

Question

I am building a React component library and additional documentation project. My goal is to display immediately all changes of the library straight into the documentation.

So far I have configured webpack to watch for changes in the components. After rebuilding, I take the output folder and move it in the node_modules of the documentation. This way I can simulate using my component library as an external package.

The documentation is a create-react-app project and by default it does not watch for changes in node_modules. I followed this answer and executed the eject script. I updated the ignoredFiles variable in webpackDevServer.config.js and everything is working really fine. I make a change in a component, webpack recompiles, updates the package in the node_modules of the docs and then a rebuild is triggered. However, I have to refresh the browser to see the changes. Hot reloading happens when I do a change in the source of the docs, but it will be great to trigger it when I update that specific package in the node_modules. Is there a way to achieve that?

Thank you for spending time on this!

Answer 1

You can setup a local dependency that points to your package.

"dependencies": {
  "package-name": "file:../relative/path/to/your/package"
}

Then, when you created the dependency, rebuild the relative path to the module containing your package.json in watch mode and you are ready to go!