Use Webpack HMR with a hoisted Lerna React Project - reactjs

Question

Is it possible to use Webpack Hot Module Replacement (HMR) with a hoisted Lerna React project?
This is because each Lerna React package (see below as an example) is built independently and when a webpack-dev-server is launched on the main project(p3 for instance), it can only see its own changes (I mean p3 changes only) and NOT its dependencies (p1 or p2) changes sitting in other packages of its monorepo
some_lerna_project
/node_modules
/packages
/p1
/src
package.json
/p2
/src
package.json
/p3
/src
package.json
webpack.confing.js
lenra.json
If yes, would you please provide a sample config?

Answer 1

You need these packages be part of transpiled files.
// webpack.config.js
const path = require('path');
const PATH_DELIMITER = "[\\\\/]"; // match 2 antislashes or one slash
const safePath = (module) => module.split(/[\\\/]/g).join(PATH_DELIMITER);
const generateIncludes = (modules) => {
return [
new RegExp(`(${modules.map(safePath).join("|")})$`),
new RegExp(
`(${modules.map(safePath).join("|")})${PATH_DELIMITER}(?!.*node_modules)`
),
];
};
const transpileModules = ["#my-scope/p1", "#my-scope/p2"]; // using scoped packages
module.exports = {
mode: "development",
entry: {
app: "./src/index.js",
print: "./src/print.js",
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
{
test: /\.m?js$/,
include: generateIncludes(transpileModules),
use: {
loader: "babel-loader",
options: {
// use your preferred babel config
presets: ["#babel/preset-env"],
},
},
},
],
},
resolve: {
symlinks: false, // Avoid Webpack to resolve transpiled modules path to their real path
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
This code is based on next-transpile-modules which enables Next.js projects to transpile mono-repo packages.