web-dev-qa-db-fra.com

Webpack TypeScript module.hot n'existe pas

Je veux activer Webpack HMR dans un NodeJS projet écrit en TypeScript .

Mais module.hot n'est pas disponible:

  • @ types/webpack-env définit:

    declare var module: __WebpackModuleApi.Module

  • Qui est en conflit avec @ types/node definition:

    declare var module: NodeModule

Supprimer @ types/node , résout le problème, mais désactive process:

process.env.NODE_ENV === 'production' // [ts] Cannot find name 'process'
node.jstypescriptwebpackwebpack-hmr
15
kube

Résolution de conflit

@ types/webpack-env a été mis à jour depuis:

  • Le conflit sur module a été résolu dans ce PR

  • process a été ajouté dans this commit

Le code de la question initiale ne nécessite plus que @ types/webpack-env.

Mais importer @ types/node à côté ne sera plus en conflit.

Installation

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

Et si vous avez également besoin de définitions d’environnement NodeJS:

npm install --save-dev @types/node
8
kube

Comme peu de gars l'ont écrit ici, c'est le meilleur moyen:

npm i -D @types/webpack-env

Pour moi, cela fonctionne comme prévu, résoudre le problème avec la propriété hot non reconnue.

Dans mon projet, j'utilise ces versions:

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

Je ne sais pas si la question est toujours à jour, mais pour mon problème, installer des types pour webpack m'aide.

20
WooCaSh

Pourrait être aussi simple que d'ajouter la ligne suivante en haut du fichier. 

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

Vous pouvez étendre la portée globale et utiliser la fusion d'interface pour rouvrir l'interface NodeModule et ajouter la propriété hot manquante.

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;
            // ...
        }
    }
}

Mais en réalité, cette augmentation devrait potentiellement être effectuée dans le fichier de déclaration Webpack lui-même.

5
Daniel Rosenwasser

Changer .hot par ['hot']

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

Utilisation

if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {
0
Raúl Martín Ramos