Property 'hot' does not exist on type 'NodeModule'.ts(2339)

Question

I have a purchased react template with the following lines, but its not clear to me whats the purpose of this, the template its in JS and I want to change it to Typescript

The following lines were present in the template

 if (module.hot) {
    module.hot.accept('./dashApp.js', () => {
      const NextApp = require('./dashApp').default;
      ReactDOM.render(<NextApp />, document.getElementById('root'));
    });
  }

However when renamed to .TS, I get this error:

Property 'hot' does not exist on type 'NodeModule'.ts(2339)

What does this code really does? in plain english

Answer 1

This code is related to Webpack's hot module replacement feature (HMR). module.hot works like this:

module.hot.accept(
  dependencies, // Either a string or an array of strings
  callback // Function to fire when the dependencies are updated
);

So the code you included does this: *when the code of ./dashApp.js or one of the module it requires/imports in the requirement/import tree gets updated, re-render the whole React app.

The hot property on node modules it not standard, thus the TS error - make sure you install the required type definitions! npm install --save-dev @types/webpack-env should do the trick.

---

Related reads:

• Hot Module Replacement concept: high-level Webpack doc on HMR
• Hot Module Replacement API low-level Webpack doc on HMR, explaining how to use it and how does module.hot.accept does
• Property 'hot' does not exist on type 'NodeModule': Github issue resolving the TS error

Answer 2

Just to add to the accepted answer: After installing @types/webpack-env you might have to add "types": ["webpack-env"] to your tsconfig.json in compilerOptions. Only then it finally worked for me.

So your tsconfig.json would look like this:

{
  "compilerOptions": {
    ...
    "types": ["webpack-env"]
  },
  ...
}