Webpack TypeScript module.hot does not exist

Question

I am using Webpack in a TypeScript project.

In my configureStore.dev.ts file, I want to use module.hot from Webpack to enable HMR.

My problem is that hot by default does not exist in the NodeModule module, and setting @types/webpack-env does not solve my problem.

---

@types/node conflicts with @type/webpack-env

After searching in the definition of @types/webpack-env they define the Module interface, where everything is clearly defined.

But there was a conflict on the line:

 declare var module: __WebpackModuleApi.Module; 

Since Module has already been defined by @types/node as a NodeModule .

Just removed @types/node and hot now available on Module .

---

process now undefined

Now that I have removed @types/node , I cannot check

 process.env.NODE_ENV === 'production' 

How to determine the process ?

Answer 1

As few guys wrote here, this is the best way:

 npm i -D @types/webpack-env 

For me, this works as expected, resolving the issue with the unrecognized hot property.

In my project, I use these versions:

 "@types/node": "^8.0.19", "@types/webpack-env": "^1.13.0" 

I do not know if the question is still relevant, but for my type setting problem for webpack help me.

Answer 2

It may be as simple as adding the following line at the top of the file.

 ///<reference types="webpack-env" /> 

Answer 3

You can expand the global scope and merge the interface to reopen the NodeModule interface and add the missing hot property.

 import webpack = require("webpack"); declare global { interface NodeModule { hot: { accept(dependencies: string[], callback: (updatedDependencies: string[]) => void): void; accept(dependency: string, callback: () => void): void; accept(errHandler?: (err: any) => void): void; decline(dependencies: string[]): void; decline(dependency: string): void; decline(): void; dispose(callback: (data: any) => void): void; addDisposeHandler(callback: (data: any) => void): void; removeDisposeHandler(callback: (data: any) => void): void; // ... } } } 

But in fact, this addition should be made in the Webpack declaration file itself.

Answer 4

Change .hot to ['hot']

 if (module.hot) { module.hot.accept(); module.hot.dispose(() => { 

Using

 if (module['hot']) { module['hot'].accept(); module['hot'].dispose(() => {