Menu
I want to enable Webpack HMR in a NodeJS project written in TypeScript.
But module.hot is not available:
@types/webpack-env defines:
declare var module: __WebpackModuleApi.Module Which conflicts with @types/node definition:
declare var module: NodeModule Removing @types/node, solves the issue, but disables process:
process.env.NODE_ENV === 'production' // [ts] Cannot find name 'process' 
238
To enabling HMR in your project, you need to let your application know how to handle hot updates. You can do so by implementing the module. hot API exposed by Webpack. Once the hot update is accepted, the HMR runtime and the loaders will take over to handle the update.
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload. Save valuable development time by only updating what's changed.
Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh. This page focuses on implementation while the concepts page gives more details on how it works and why it's useful.
Using the webpack-dev-server we can set up hot module replacement with React. This means whenever we modify a component and save the file webpack will replace the module on the page without reloading, without losing component state.
As few guys wrote here it's the best way:
npm i -D @types/webpack-env For me it works as expected, resolving issue with not recognized hot property.
In my project I'm using those versions:
"@types/node": "^8.0.19", "@types/webpack-env": "^1.13.0" I don't know if question is still up to date but for my problem installing types for webpack help me.
108
@types/webpack-env was since updated:
Conflict on module was solved in this PR
process was added in this commit
The code in the original question now only needs @types/webpack-env.
But importing @types/node alongside won't conflict anymore.
npm install --save-dev @types/webpack-env And if you also need NodeJS environment definitions:
npm install --save-dev @types/node If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With