Guides - Warnings/Errors in Hot Module Replacement

[GelsonMR]

Hello! I am new to Webpack, and I'm trying to learn it by the guide, as I advanced to HMR, I got some errors...

I've written the code showed in that chapter until the Stylesheets part (which I haven't read yet), and I got this console message while using npm start:

ERROR in chunk print [entry]
bundle.js
Conflict: Multiple assets emit to the same filename bundle.js

I'm not sure, but I think this error is about having multiple entries, so I guess it needs to have a output name for each one of it.

Then I noticed that the author of the guide changed the filename property of output from [name].bundle.js to bundle.js, so I typed it back to the previous value to see what happens, then I get no error from the console. But also no hot edits work also...

When I edit(and save) the print.js file, I get the following browser's console:

The ReferenceError is understandable(and they need to be solved on the guide), but even getting through them we have the warnings, that tell us the modules can't be hot updated, and that's the focus of this section of the guide...

Does anybody who had read the article about HMR know how to proceed? I really don't have a clue of how to solve and improve it...

[skipjack]

@TheDutchCoder @sbaidon I think this may have been introduced in #1439. Can one of you take a look?

[sbaidon]

I have looked into the issue. I found that the warnings are removed once you specify a single entry point, index.js in this case. I am not sure if there is other way to remove them...

[skipjack]

To quote @maheshspec from #1463:

While going through the hot module replacement guide, I noticed a snippet line did not have + sign indicating that its a new statement.

What is the current behavior?
HMR guide page's Gotcha section has a code snippet. This code snippet introduces a let element = component(); statement. Its not present in the Enabling HMR section. However, it does not have a + sign to indicate that its a new statement.

What is the expected behavior?
The let element = component(); statement should be treated as a new statement by having a + in front of it and highlighting it in green.

@maheshspec also opened this pr: #1464 (though I'm not sure it resolves everything mentioned here)

[skipjack]

I have looked into the issue. I found that the warnings are removed once you specify a single entry point, index.js in this case. I am not sure if there is other way to remove them...

Ah actually, after re-reading the error/warnings, I'm pretty sure they are all do to the same issue with the element variable.

1. module.hot.accept runs and fails.
2. Before the actual error is printed Ignored an update... warning is thrown.
3. Then the actual error is shown (printed by webpack's or webpack-dev-server's log module).
4. Then the final warning is thrown just mentioning the accept-errored again.

@sbaidon I don't think anything need to be changed with the entry configuration. I think we just need to re-organize that snippet a bit. Let's finish discussing/fixing in #1464...