API - Hot Module Reloading

[bebraw]

Describe the hot module reloading interface and how it works in this article.

[SpaceK33z]

Also note that we need to be very clear on the differences in the CLI and the Node.js API. --hot automatically adds the HMR plugin, while hot: true in the API does not.

Ultimately, there shouldn't be any differences. But meanwhile, we need to make this very clear.

[bebraw]

Yeah, problems like that become obvious with documentation. webpack 1 documentation actually covers these quite a bit, but I have a feeling we can be clearer on that. There are some related technical docs that should be ported over.

[skipjack]

So currently there is a concepts page for hmr and a hmr-react guide. It seems this issue is for creating a page documenting how to interact with hmr via node.

Maybe a short section on this page or creating a separate one would make sense? It is mentioned on the CLI page already.

[skipjack]

Also, @SpaceK33z a warning was added to the devserver configuration page 🎉 . Definitely tripped me up in the past, so I'm happy that's there now.

[tiye]

I ran into this issue too thheller/shadow-cljs#12 (comment)

From my side I think a minimal HMR example(and without React) would help a lot. I just find it problematic to make it really work correctly, but don't know what happened in my case.

[skipjack]

From my side I think a minimal HMR example(and without React) would help a lot. I just find it problematic to make it really work correctly, but don't know what happened in my case.

I completely agree and after finally getting react-hot-loader to work, I realized some of the things in the current HMR w/ React Guide aren't even necessary. Separating out the bare minimum to make it work, regardless of environment or framework, would definitely be really helpful and it's actually not that bad. If you're using webpack-dev-server, basically all you need to do is add:

import Webpack from 'webpack'

export default {
  // Rest of configuration...
  devServer: {
    hot: true,
    // ...
  },
  plugins: [
    new HotModuleReplacementPlugin(),
    // ...
  ]
}

I might take a stab at some of this though I'll probably need some help from others who have more experience with the NodeJS interface for it.

[tiye]

I made one https://github.com/mvc-works/minimal-webpack-hmr but it does NOT work yet... Anyone please help fix it...?

---

updates: minimal-xyz/minimal-webpack-hmr#1

I think this piece of code is wrong not to require the module again after accepting changes:

https://webpack.js.org/guides/hmr-react/

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/App', () => {
    // something is missing here!!! but there's still a chance it's built in some loaders or plugins
    render(App)
  });
}

---

updates, maybe it's ES6, I was told that ES does not have to require() again here...

[skipjack]

@jiyinyiyong your repository worked fine for me:

If it's not obvious, I kept changing console.log(...) statement in src/lib.js from "lib 6" to "lib 5" to "lib 4" and it re-ran the module every time.

Maybe you had an outdated dependency or something?

[skipjack]

Started working on this, will be submitting a PR soon (likely tomorrow).

[skipjack]

@jiyinyiyong ping! Did you ever resolve that issue? Also would it be ok if I linked to that repo as an example in the new page I'm adding in #1251?

[tiye]

@skipjack sorry I didn't read the notifications. Going though bad time for me. What was the problem? I thought it should "rerun"?

[skipjack]

@jiyinyiyong no worries. It does but that log message get's a bit lost in the HMR logs, note the "loading lib 4" and "accepting lib" above it:

See the updated HMR guide -- I used your repo for inspiration.

[tiye]

Glad it helped.

I was confuse about this sentence:

Maybe you had an outdated dependency or something?

Then I recalled that I was told on Twitter that for import/export it's different, ES modules does not need a require() while ES5 does, a little difference:

https://github.com/minimal-xyz/minimal-webpack-hmr/blob/master/src/index.js
https://github.com/minimal-xyz/minimal-webpack-esm-hmr/blob/master/src/index.js

so... that explaines "outdated" here?

[skipjack]

I was actually referring to your npm packages -- maybe one was outdated (e.g. webpack or some child dep) that was causing you not to see it work. Because I didn't really have to make any changes to your repo to get it working.

Your point about the difference between import vs require with HMR is correct though, at least from my understanding. They mention the same thing in the react-hot-loader documentation.

[tiye]

Oh, someone fixed it for me. https://github.com/minimal-xyz/minimal-webpack-hmr/pull/1/files