Hot reloading HMR in code with new ES6 module syntax

[darul75]

Hi,

Before my code to handle hot reloading on my server side was something like

dep.js

var modDep = {};
module.exports = modDep ;

main.js

var dep= require('dep');
// do some stuff

//
// check if HMR is enabled
// --------------------
if(module.hot) {
  module.hot.accept(['dep'], () => {
    dep= require('dep');
  });
}

And it was really fine.

Then I decided refactoring server side code to ES6 syntax with import/export way of doing. Note that I use Babel transpiler.

dep.js

var modDep = {};
// before
// module.exports = modDep ;
export default modDep;

And same main.js but really it was not working well...

Also if I update my main.js code to

main.js

import dep from 'dep';
// do some stuff

//
// check if HMR is enabled
// --------------------
if(module.hot) {
  module.hot.accept(['dep'], () => {
    dep= require('dep');
  });
}

It says dep is readonly etc...

Do you think it will be possible later ?

Thanks in advance.

Julien

[sokra]

Do you think it will be possible later ?

Yes if you don't use babels ES6 Modules transpiling, but webpack 2s native support for ES6 Modules.

It work that way: (beta)

import dep from 'dep';

if(module.hot) {
  module.hot.accept('dep', () => {
    // no need to require 'dep' because ES6 import are automatically bound.
  });
}

[darul75]

hi @sokra

very good new, I was not expecting it and hope webpack 2s will be soon available, I had seen it was on the road, can not wait to see it alive 💯

[jonaskello]

Will it be possible to setup webpack 2 to do generic hot-reload of any es6 module and dependent modules? Similar to how hot-reloading works in jspm?

[sokra]

Will it be possible to setup webpack 2 to do generic hot-reload of any es6 module and dependent modules? Similar to how hot-reloading works in jspm?

You can put a module.hot.accept() in your entry point, this will have similar effect. But I would recommend not doing so, except when you are sure all changed module have no (unhandled) side effects. Better put correct accept code at defined places in your application.

[bebraw]

Closing as webpack 2 should handle this.