How to enable Hot Module Replacement (HMR) for a directory outside of src in a React app?

Question

I have a React app that uses an external shared directory at the top level, shared-js, that is located outside of the src directory of my app. I want to enable Hot Module Replacement (HMR) for this shared module so that I can see changes to it in real-time without having to reload the entire app (for example if I change a console.log within a file in that directory).

I have already tried adding webpack.HotModuleReplacementPlugin() to my webpack.config.js file and adding the following code to my index.js file in the shared-js module:

if (module.hot) { module.hot.accept();}

However, HMR still does not work for changes made to the shared-js module.

How can I enable HMR for the shared-js module in my React app?

What I have tried:

Adding webpack.HotModuleReplacementPlugin() to webpack.config.js Adding if (module.hot) { module.hot.accept(); } to index.js in shared-js

Code:

Here is my current webpack.config.js file:

const paths = require("./paths");

module.exports = {
  entry: {
    main: paths.appIndexJs,
    shared: "../libs/shared-js/index.js",
  },
  output: {
    path: paths.appBuild,
    filename: "[name].bundle.js",
  },
  module: {
    rules: [
      // ...
    ],
  },
  plugins: [
    // ...
    new webpack.HotModuleReplacementPlugin(),
  ],
  // ...
};

And here is my index.js file in shared-js:

'use strict';
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
__exportStar(require("./types"), exports);
__exportStar(require("./core"), exports);
__exportStar(require("./testing"), exports);

if (module.hot) {
  module.hot.accept();
}

As someone new to React/web dev, I would like to clarify if hot reloading is what I need to change in order to have React automatically update files to browser without the need to rerun yarn start, or if there is something else that must be changed. Thank you!

How to enable Hot Module Replacement (HMR) for a directory outside of src in a React app?

0 Answers0