Open aegyed91 opened 8 years ago
If you're seeing the "Emitting updates" and "Updated modules" messages, then your build process is likely correct. The issue is probably that you don't have any code calling module.hot
. See #16.
I'm getting this as well, is there a way to get more verbose logging?
I have also the same problem. As I use websocket, I should not have to add js code, no ?
From the node console :
22:48:11 GMT+0200 (CEST) [HMR] User connected, syncing
updated source
22:48:29 GMT+0200 (CEST) [HMR] Emitting updates
864035 bytes written (0.78 seconds)
From the Dev tool console :
[HMR] Attempting websocket connection to http://localhost:3123
admin.ts:13creating an admin
index.js:425 [HMR] Websocket connection successful.
index.js:514 [HMR] Updated modules ["modules/template.html", "modules/admin.ts", "index.ts"]
Are you using module.hot.accept
(or a transform that uses it for you, like react-transform-hmr) anywhere in your code? You need to, or else Browserify-HMR won't know how to update your code and you'll run into this issue.
Not at all. Where do we find it ?
Browserify-HMR and Webpack HMR update files by executing them again, but you have to first mark which files can accept updates by using module.hot.accept
.
A file can accept updates of itself like this:
console.log("foo");
if (module.hot) {
module.hot.accept();
}
Each time you edit that file, it will execute (and log something again, unless you've removed that statement). Now that's not terribly useful. Usually you want to update functions or classes in-place that are required by other files. Or maybe you want to update already instantiated instances of a class. This takes more effort to set up. I plan to write a bit about this, but I've been delaying that until I polish up and fix a few bugs in Browserify-HMR (like these misleading log statements).
If your project uses React, then go use react-transform-hmr, and all of your files that define React components will automatically be hot-replaceable and you can stop reading here if you want!
If you use the ud library, then it handles using the module.hot
APIs to accomplish common tasks for you, and you can make a file with a hot-replaceable function like this:
var ud = require('ud');
// You can edit this function in a live application!
function greeting(name) {
return "Hello, "+name;
}
module.exports = ud.defn(module, greeting);
or you can make a hot-updateable class like this in ES6:
import {defn} from 'ud';
class Greeter {
// Changes to this constructor will only affect future instances of Greeter. Changes
// to it can't affect instances that have already been constructed!
constructor(ownName) {
this._ownName = ownName;
}
// Changes to this method will affect all current and future instances of Greeter
// immediately!
greet(name) {
return `Hello ${name}, this is ${this._ownName}`;
}
}
// defn works on both functions and classes, because they're the same in Javascript
// anyway.
export default defn(module, Greeter);
It's a bit of boilerplate, but the control it gives you is necessary when you have file-scoped state that needs to be persisted between updates (ud's defonce
function helps here). I've been brainstorming about automatic code transform tools to make this not necessary, but I haven't yet figured out a technique that would fit all of the needs I've seen in real codebases that ud is able to handle now.
Thanks for your reply. It makes thing much more clear.
Hi @AgentME, did you yet came to write a little more about how to update already instantiated instances? I'm referring to your comment: "Or maybe you want to update already instantiated instances of a class. I plan to write a bit about this, but I've been delaying that until I polish up and fix a few bugs in Browserify-HMR"
Hello @AgentME, I am having this issue too. Also, I am using Browserify+Watchify+BrowserSync. I did use the module.hot.accept() in my custom HMR-like class. I am not using ud or React so I am just adding the following code at the end of my ES6 class.
if(module.hot){
module.hot.accept();
}
I am also getting these outputs in the browser console:
[HMR] Updated modules ["./moduleName.js"]
However, it seems the JS code isn't being re-inject in the
Any ideas on what's causing this?
Hello @AgentME could you please help me out a bit? I having hard times getting this thing to work.
It seems like updates being emitted early, but i don't think so this is the problem because it never inject the code changed in the previous save.
Browser console:
This is how my gulpfile looks:
Terminal:
I also use browsersync for server can that be a problem?