docs(guides): fix HMR Gotcha section snippet (#1463)

[maheshpec]

Fix for snippet in the Gotcha section of Hot Module Replacement Guide.

Resolves #1461

[skipjack]

@maheshpec does this resolve the issue you opened, #1463? Also, I think your issue may overlap with #1461 so I may close yours in favor of the first but I will double check before doing so.

[skipjack]

I think maybe we should re-organize this whole code block a bit -- typically if (module.hot) statements are found at the bottom of modules. Also, in this case I think it makes more sense logically to include it at the bottom of the file as it's dependent on previously defined variables and runs after the other code in the file.

cc @sbaidon @TheDutchCoder

[skipjack]

See my comment above... I think we can make a few changes to put the confusion to bed and make the code snippets flow a bit better.

@sbaidon can you explain more what those other warnings mentioned in #1461 were about? You mentioned some change to the entry configuration fixed them?

[sbaidon]

Ok, so I re-organized the block as @skipjack mentioned. I am not getting any kind of error, but the warning is still showing up:

As you can see the print.js module is being updated, but then the warning is telling us it wasn't ?

My guess was that somehow webpack was trying to update the module twice, and it is only being accepted the first time.

I thought it had something to do with having both print.js and index.js listed as entry points in our configuration.

So when I removed print.js as an entry this is the output I got:

By the way I added the new webpack.NamedModulesPlugin() plugin to the config so we could see names instead of ids.

Still not sure if I am doing anything else wrong...

[maheshpec]

I think @sbaidon is right. It is trying to load it twice - once for the index and other for the print entry point. When its trying to load the print entry point, it is getting unaccepted in getAffectedStuff function within hotApply function of HotModuleReplacement.runtime.js file within webpack (I'm using 3.4.1). The exact condition is

if(module.hot._main) {                                                                                  
        return {                                                                                                           
          type: "unaccepted",                                                                                                        
          chain: chain,                                                                                                    
          moduleId: moduleId                                                                                               
        };                                                                                                                 
} 

IMHO the approach to fix would be to add a Preparation section which removes the print entry point. Please let me know what you guys think

[maheshpec]

I made the changes that @sbaidon mentioned and the ones about ordering that @skipjack mentioned. I've tested this with 3.4.1 version of webpack and it is working without any console warnings for me.

[skipjack]

@maheshpec @sbaidon yes good catch and @maheshpec thank you for updating!

I should've caught that earlier, you shouldn't have an entry file that's consumed by another module without using the CommonsChunkPlugin and even there it usually just makes sense for vendor code splitting -- I completely missed that that was going on in these examples. I do understand how it happened when trying to synchronize this with the previous guides though. If we wanted to split print.js out to a separate chunk in the current setup, then import() would be a better solution.

As soon as the build passes, I'll get this merged so we can close out #1461.

[sbaidon]

There's just this extra plus sign left

[skipjack]

I think that's ok, it's just indicating that a new line was added in between the last line of the script and new content. That's how we've done it in the other guides as well.

[skipjack]

Ah or maybe you meant there's two plus signs? That's actually just a looking at a diff within a diff issue 😆 (there's really only one in the document).

[maheshpec]

It is a little confusing to view these diffs :)

[skipjack]

yeah like some kind diff inception lol

[sbaidon]

oh I did mean that the new line was added, but if that's how it has been done on the other guides is fine 👍