SAFE-BookStore
SAFE-BookStore copied to clipboard
SAFE-Stack
`hot : true` and browser refreshing
With the current release, hot reloading didn't fully work for my setup (no automatic browser refreshing) until, after finding an old issue on webpack-dev-server, I removed the hot : true option from webpack.config.js. Apparently it conflicted somehow with webpack.HotModuleReplacementPlugin().
If hot reloading and browser refreshing currently works for you, could you please check if it still works after removing hot : true? If so, it may be better to remove it for compatibility with some setups.
/cc @MangelMaxime
Am 03.10.2017 13:01 schrieb "piaste" [email protected]:
With the current release, hot reloading didn't fully work for my setup (no automatic browser refreshing) until, after finding an old issue on webpack-dev-server https://github.com/webpack/webpack-dev-server/issues/206, I removed the hot : true option from webpack.config.js. Apparently it conflicted somehow with webpack.HotModuleReplacementPlugin().
If hot reloading and browser refreshing currently works for you, could you please check if it still works after removing hot : true? If so, it may be better for compatibility to remove it.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/SAFE-Stack/SAFE-BookStore/issues/197, or mute the thread https://github.com/notifications/unsubscribe-auth/AADgNL3jtt4pSL6nD5oaUAXIQO81lbAUks5sohQGgaJpZM4Pr75c .
@piaste Do you have webpack-dev-server installed globally ?
Removing the hot: true do not work for me. Can you please, try with this version: https://github.com/SAFE-Stack/SAFE-BookStore/pull/198
@MangelMaxime
Do you have webpack-dev-server installed globally ?
No. I have an older version of webpack installed globally, but no webpack-dev-server.
Removing the hot: true do not work for me. Can you please, try with this version: #198
With those changes it doesn't work for me.
Can you please try to remove the global webpack ?
We need to launch the webpack-dev-server with the hot: true or -- hot option set. Otherwise, it will not start the HMR. You probably have something on your system that we don't have... I tested it on 3 computers, and several projects without problem... Don't really know how to debug it for you here.
@piaste Do you see [WDS] Hot Module Replacement enabled. in your console ?
And also, do you have any error in the network panel ?
@MangelMaxime
After uninstalling the global Webpack, the CLI parameter (from your PR) triggers refreshing; the original still won't refresh, however.
This is the output when it doesn't work (has been the same for every configuration I tried). The network panel also contains a webpackHotUpdate call with the updated page, but no errors.
Initial state: Object
client?cd17:77 [WDS] Hot Module Replacement enabled.
program.fs:72 New message: Object
program.fs:74 Updated state: Object
program.fs:72 New message: Object
program.fs:74 Updated state: Object
2client?cd17:80 [WDS] App updated. Recompiling...
client?cd17:212 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:23 [HMR] Updated modules:
log.js:23 [HMR] - ./pages/WishList.fs
log.js:23 [HMR] - ./App.fs
log.js:23 [HMR] App is up to date.
Honestly, after I fixed it on my end I sort of expected the hot = true option must have been redundant in the presence of HMR, and that removing it would only smooth things. Didn't think it would open a rabbit hole 🤷♂️ and it's more of a webpack-dev-server issue in any case.
hot: true tell webpack-dev-server to serve file via HMR.
And the HMR plugin, tell webpack to add the plugin in the client so he know how to handle it. But yes, it's an issue with webpack-dev-server. Could you please open an issue on their repo explaining your situation, action etc. Perhaps, someone will be able to help
I belatedly realised something - deleting hot = true made autorefresh work on my end but it wasn't actually using HMR, just plain old full-page refresh, and I mistook it for HMR 🤦♂️
With the fix in your pull request, and after removing the global Webpack, I get actual HMR, so I think merging it would be better.
Not quite related, but in the current repo App.fs places withDebugger before withReact, and as your documentation states that doesn't work properly with the Redux devtools - you can look at the state history but not rewind/replay the page. Should I submit a PR to change it to:
#if DEBUG
|> Program.withConsoleTrace
|> Program.withHMR
#endif
|> Program.withReact "elmish-app"
#if DEBUG
|> Program.withDebugger
#endif
|> Program.run
?
@piaste Can you please check that having hot = true without the global webpack work for you ?
I would prefer, keep hot = true instead of using the --hot cli to keep the configuration in one place.
And yes, you should send a PR to fix the debugger support.
I'm seeing the exact same behavior--with the latest version of this repo I can't get a page refresh until I remove hot = true (at which point, as you said, HMR does not work). I've only recently installed Node + npm and Yarn and am positive that I didn't install Webpack (or anything else) manually myself.
@kerams are you sure that you got HMR and live reload?
Can you please copy paste your browser console after doing an HMR update ?
Program.mkProgram init update view
|> Program.toNavigable (parseHash pageParser) urlUpdate
#if DEBUG
|> Program.withConsoleTrace
|> Program.withDebugger
|> Program.withHMR
#endif
|> Program.withReact "elmish-app"
|> Program.run
[WDS] App updated. Recompiling...
client?cd17:212 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:23 [HMR] Updated modules:
log.js:23 [HMR] - ./pages/WishList.fs
log.js:23 [HMR] - ./App.fs
log.js:23 [HMR] App is up to date.
The only modification to webpack.config.js:
resolve: {
modules: [ "node_modules", resolve("../../node_modules/") ]
},
No refresh with hot = true.
@kerams Can you please tell me if you get HMR working with this version (take the hot_via_cli branch) ?
Your change makes no difference. However, I did find something curious. After I reload the page I get HMR and live reload on a menu item when logged out on the home page. When I go to the login page and change a menu item again, I no longer get a live reload on that page or home (!) until I type something in a field or navigate the menu.
If you remove this lines what's the result ?
|> Program.withConsoleTrace
|> Program.withDebugger
Still the same (in this repo and yours). After navigating away from the Home page, HMR only triggers after I force a render.
What's weirder is that if after all that I actually log in, I end up in some strange logged in/out state, where clicking on Wishlist takes me to the Home page and makes me appear logged out. Clicking on Login then makes me logged in instantly. I wonder if @piaste can reproduce any of this.
@kerams I'll try it this evening. I did all my attempts directly on the login page itself so didn't notice anything about that.
EDIT: Nevermind, can't test at all atm because the concurrently js package has suddenly decided to disappear, even with a freshly-cloned repo. Ugh, JS ecosystem.
I have the same problem. I noticed that the views were not working were being rendered using the lazyView2 method and tried removing it. This fixed the HMR problem but I guess HMR should also work for lazy views?
@purkhusid HMR behind lazyView, lazyView2, lazyView3 works too but because they are lazy their will not re-render directly. They are lazy so they only re-render if your model changed, trigger a change into the submodel you passed to the lazyView and you will see that's the change have been applied to your application. We can't really do anything for that.
still an issue? I tried new webpack.HotModuleReplacementPlugin() and also hot: true but none worked for me...
I use "webpack-dev-server": "^2.11.1" with "webpack": "^3.11.0"
@dgroh Are you using any of lazyView, lazyView2, lazyView3 in your application ?
Do you have a global version of webpack isntalled ? If you use this project do you get HMR ?
Can you please show us your Program.mkProgram init update view part ?
Which version of Fable.Elmish, Fable.Elmish.HMR, etc. are you using ?
remove hot:true works for me.
I use "webpack": "^4.29.3" and "webpack-dev-server": "^3.1.14"
