Webpack TypeScript 模块热替换（module.hot）不存在

Question

我希望在使用TypeScript编写的NodeJS项目中启用Webpack HMR。

但是module.hot不可用：

• @types/webpack-env定义：

  declare var module: __WebpackModuleApi.Module
  

• 这与 @types/node 的定义相冲突：

  declare var module: NodeModule
  

删除 @types/node 能够解决此问题，但会禁用 process：

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

- kube

---

一个笔误：@type/webpack-env 应该是 @types/webpack-env。 - xcatliu

Answer 1

正如其他一些人在这里写的那样，这是最好的方法：

npm i -D @types/webpack-env

对我来说，它的表现符合预期，解决了无法识别 hot 属性的问题。

在我的项目中，我正在使用这些版本：

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

我不知道这个问题是否还有更新，但对于我的问题，安装webpack类型帮助了我。

- WooCaSh

---

这对我起作用了，没有任何其他的添加。 - Rafael Khan

Answer 2

冲突解决

@types/webpack-env已进行更新:

• 在此 PR中，module的冲突已经得到解决。

• process已在此提交中添加。

现在，原问题中的代码只需要@types/webpack-env。

但是，同时导入@types/node将不会再产生冲突。

---

安装

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

如果您还需要 NodeJS 环境的定义：

npm install --save-dev @types/node

- kube

Answer 3

可能只需要在文件顶部添加以下行即可。

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

- user1595858

---

在安装了webpack-env的typings之后，以下命令适用于我： npm install --save-dev @types/webpack-env - Patrik

这很奇怪，但对我在NX开发中起作用了https://nx.dev/。我首先安装了`@types/webpack-env`，然后在文件顶部添加了您的参考行。谢谢。 - Danish

Answer 4

你可以扩展全局范围并使用接口合并来重新打开NodeModule接口，并添加缺失的hot属性。

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

但实际上，这种增强功能应该潜在地在Webpack声明文件中完成。

- Daniel Rosenwasser

---

是的，我认为会有官方解决方案，并且在某个地方有可用的定义。 - kube

如果API是合适的，您绝对可以发送PR，我们将会接受它。我大多数是根据当前文档编写答案的。否则，您认为这是被接受的答案吗？ - Daniel Rosenwasser

实际上，在@types/webpack-env中一切都被很好地定义了，这是我的错误，因为我添加了@types/node以便使用模块和require，但我不应该这样做。 - kube

我更新了我的问题，因为现在我遇到了process的问题。 - kube

添加 @types/webpack-env 对我很有帮助。我想我们导入的库不一样。 - Adrian Moisa

@AdrianMoisa 在您留言时，类型定义冲突已经解决。这就是为什么一切都运行得如此顺利的原因。 :) - kube

Answer 5

这将解决问题

yarn add @types/webpack-env --dev

如果使用VScode，则会立即生效。

如果使用Intellij，则需要重新启动。

- Gal Bracha

Answer 6

将 .hot 改为 ['hot']

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

使用

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

- Raúl Martín Ramos

---

这是一个更好的解决方案，因为简单 === 更好。 - Bartekus

@Bartekus 这不是一个好的解决方案。它不能解决冲突问题，同时也禁用了类型安全。 - kube