CODEWITHSUNDEEP
node.jstypescriptwebpackwebpack-hmr
kube
kube

Reputation: 13934

Webpack TypeScript module.hot does not exist

I want to enable Webpack HMR in a NodeJS project written in TypeScript.

But module.hot is not available:

Removing @types/node, solves the issue, but disables process:

process.env.NODE_ENV === 'production' // [ts] Cannot find name 'process'

Upvotes: 50

Views: 22906

Answers (6)

Gal Bracha
Gal Bracha

Reputation: 20011

This fixes it

yarn add @types/webpack-env --dev

VScode would work immediately

Intellij would need a restart

Upvotes: 5

kube
kube

Reputation: 13934

Conflict resolution

@types/webpack-env was since updated:

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

Upvotes: 47

Raúl Martín Ramos
Raúl Martín Ramos

Reputation: 664

Change .hot by ['hot']

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

Use

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

Upvotes: 4

WooCaSh
WooCaSh

Reputation: 5212

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.

Upvotes: 55

user1595858
user1595858

Reputation: 3878

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

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

Upvotes: 26

Daniel Rosenwasser
Daniel Rosenwasser

Reputation: 23443

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.

Upvotes: 6

Related Questions