webpack5+TS ESM模式报webpackHot不存在于ImportMeta类型

这个报错是纯TypeScript静态类型检查层面的误报，完全不影响实际热重载功能运行：

• import.meta.webpackHot是webpack运行时注入的自定义属性，不属于ES标准规定的ImportMeta类型固有字段
• webpack5本身内置了该属性的类型声明，但不会自动注入到TS的类型扫描范围，TS默认只会识别标准语法和显式引入的类型，自然会提示属性不存在
• webpack官方HMR示例默认面向JavaScript环境编写，没有做TS环境的类型适配，直接复制到TS项目里就会触发类型报错
• 不需要额外安装第三方类型依赖库，相关类型声明已经包含在本地安装的webpack包中

任意选一种方案即可解决：

方案1：全局引入webpack内置类型（最省事） #

修改项目根目录的tsconfig.json，在compilerOptions.types数组中加入webpack/module，显式让TS加载webpack提供的ESM环境类型扩展：

{
  "compilerOptions": {
    // 保留原有其他配置项
    "types": [
      // 保留原有引用的类型，比如node等
      "webpack/module"
    ]
  }
}

配置完成后重启TS服务（VSCode可通过命令面板执行Restart TS Server），报错就会消失。

方案2：局部引入类型（避免类型冲突） #

如果项目后续可能切换打包工具，不想全局引入webpack类型，可以在被TS配置include覆盖的目录下新建全局类型声明文件（比如src/env.d.ts），在文件内单独引入webpack的模块类型：

/// <reference types="webpack/module" />

方案3：手动声明类型（零额外依赖） #

如果不想依赖webpack包的内置类型，也可以在全局类型声明文件中手动扩展ImportMeta接口，只声明实际用到的属性即可：

interface ImportMeta {
  webpackHot?: {
    accept: (deps?: string | string[], callback?: (updatedDeps: unknown) => void) => void;
    dispose: (callback: (data: Record<string, unknown>) => void) => void;
  }
}

内容的提问来源于stack exchange，提问作者user16435030