Guides - Issue in HMR Guide

[sivkun]

I according to the document hot-module-replacement.But,the output in chrome console is the name of updaded file,nothing else.

the output info

[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Nothing hot updated.
[HMR] App is up to date.
[HMR] Updated modules:
[HMR]  - ./src/library.js
[HMR] App is up to date.

if so

if(module.hot){
  module.hot.accept('./library', function() {
    console.log('Accepting  the updated library module!');
    var lib = require('./library').default;
    lib.log();
  })
}

then output

[WDS] App updated. Recompiling...
 [WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Nothing hot updated.
[HMR] App is up to date.
Accepting  the updated library module!
second init...
[HMR] Updated modules:
[HMR]  - ./src/library.js
[HMR] App is up to date.

[skipjack]

You should take a look at #1439 as the guide is currently being rewritten, and also make sure you are on the latest version of webpack. I believe in v1, the additional require is necessary, however in v2 and v3 I don't think it is (and I have tested this).

[skipjack]

@sivkun I tested this out again and was not able to reproduce your issue. Please check out TheDutchCoder/webpack-guides-code-examples#18 and provide an example repo to reproduce your issue. If you run the code there you should see the log every time a change is made in src/library.js without an additional require in the module.hot section of src/index.js.

I'm pretty sure what you're seeing is due to an outdated version but I could be wrong. Note that the example is on the latest version of webpack (3.3.0).

[sivkun]

@skipjack Ifind this if I add babel-loader in webpack.config.js ,the demo you provided cann't work well。
first

npm install --save-dev babel-loader babel-core babel-preset-env

second ,add this in webpack.config.js

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },

if so, you can reproduce the issue. I don't konw why. thank you!

[skipjack]

Ah I see -- the issue is most likely that you need to tell babel not to resolve modules and instead let webpack resolve them (e.g. something like ['es2015', { modules: false }] in your .babelrc).

However this isn't really a support channel so you'd probably be better off asking the question on StackOverflow or on webpack gitter channel. The main concern here is that the examples work by default, not with unknown modifications.

[skipjack]

Just to be clear, webpack 2 and 3 understand ES2015 module syntax out of the box -- so using babel to resolve modules can cause various issues like the one you're seeing.

[sivkun]

Ah I see，I will have a try .Thank you very much!