Webpack TypeScript module.hot does not exist

Question

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'

Answer 1

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.

Answer 2

Conflict resolution

@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.

---

Installation

npm install --save-dev @types/webpack-env

And if you also need NodeJS environment definitions:

npm install --save-dev @types/node

Answer 3

可能就像在文件顶部添加以下行一样简单。

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

Answer 4

You can augment the global scope and use interface merging 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 really, this augmentation should potentially be done in the Webpack declaration file itself.

Answer 5

Change .hot by ['hot']

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

Use

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

Answer 6

This fixes it

yarn add @types/webpack-env --dev

VScode would work immediately

Intellij would need a restart