webpack-contrib / webpack-hot-middleware

Webpack hot reloading you can attach to your own server

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Handle when `unacceptedModule` is not in `moduleMap`

vjpr opened this issue · comments

I encountered a problem where the module that could not be updated was not in the moduleMap resulting in - undefined being printed when listing the modules that couldn't be hot updated.

function logUpdates(updatedModules, renewedModules) {
var unacceptedModules = updatedModules.filter(function(moduleId) {
return renewedModules && renewedModules.indexOf(moduleId) < 0;
});
if(unacceptedModules.length > 0) {
if (options.warn) {
console.warn(
"[HMR] The following modules couldn't be hot updated: " +
"(Full reload needed)\n" +
"This is usually because the modules which have changed " +
"(and their parents) do not know how to hot reload themselves. " +
"See " + hmrDocsUrl + " for more details."
);
unacceptedModules.forEach(function(moduleId) {
console.warn("[HMR] - " + moduleMap[moduleId]);
});
}
performReload();
return;
}

screen shot 2018-05-04 at 11 29 16 pm

This is a good idea, i’d take a pull request for it.

The other option might be to remove this feature entirely and advise people to use the named modules plugin

I encountered a similar issue but in my case moduleMap didn't contain renewedModules which resulted in a bunch of - undefined in the console. Is there a known solution for that?

renewedModules = [
"./src/scripts/apps/enb/routes/records.js",
"./src/scripts/apps/enb/routes/index.js",
"./src/scripts/apps/enb/app.js"
]
moduleMap = {
"./src/scripts/apps/enb/routes/records.js": "./src/scripts/apps/enb/routes/records.js"
}
      if(!renewedModules || renewedModules.length === 0) {
        console.log("[HMR] Nothing hot updated.");
      } else {
        console.log("[HMR] Updated modules:");
        renewedModules.forEach(function(moduleId) {
          console.log("[HMR]  - " + moduleMap[moduleId]);
        });
      }

"./src/scripts/apps/enb/app.js"
This module contains React Hot Loader and wraps the module with hot(module)(MyApp)

"./src/scripts/apps/enb/routes/index.js"
Routes/index contains dynamic imports for code splitting <Route path="/records" component={load(() => import(/* webpackChunkName: 'enb.records' */ './records'))} />

"./src/scripts/apps/enb/routes/records.js"
This module is where the change actually occurred.

Is it possible that because of the code splitting the module map doesn't have any information about its parent modules and hence it prints out undefined? Would it be possible in this case to print out renewedModule id as a fallback?

Yep, that seems sensible, i’d take a PR.