将NestJS编译为ESM文件后，热重载重复提示无更新的问题排查

问题 #

基于NestJS官方基础模板配置ESM格式编译，已完成以下配置：

tsconfig.json 关键配置 #

{
  "target": "ESNext",
  "moduleResolution": "Bundler",
  "module": "ESNext"
}

package.json #

添加字段 "type": "module"

nest-cli.json #

{
    "$schema": "https://json.schemastore.org/nest-cli",
    "sourceRoot": "./src",
    "compilerOptions": {
        "webpack": true,
        "deleteOutDir": true
    }
}

启动命令 #

"start:dev": "dotenv -e ./envs/.env.development -- nest build --webpackPath webpack.config.dev.cjs --watch"

webpack.config.dev.cjs 配置 #

const path = require('node:path');

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

/**
 * @type { import('webpack').Configuration }
 */
const configuration = (options, webpack) => ({
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
        nodeExternals({
            allowlist: ['webpack/hot/poll?100'],
            modulesDir: path.join(__dirname, 'node_modules'),
            importType: (moduleName) => `import ${moduleName}`,
        }),
    ],
    experiments: { outputModule: true },
    plugins: [
        ...options.plugins,
        new webpack.HotModuleReplacementPlugin(),
        new webpack.WatchIgnorePlugin({
            paths: [/\.d\.ts$/],
        }),
        new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
    ],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        library: { type: 'module' },
        chunkFormat: 'module',
    },
});

module.exports = configuration;

运行后无报错，但每秒都会重复打印 [HMR] Nothing hot updated 提示，请问问题出在哪里？

解决方案 #

问题根源在于HMR轮询间隔过短，加上ESM模式下部分配置适配不当，具体修复步骤如下：

1. 调整HMR轮询间隔
   当前Webpack entry中webpack/hot/poll?100设置的轮询间隔为100毫秒（每秒10次），导致Webpack频繁检查更新并输出提示。建议将间隔调整为1000毫秒（1秒）或更长：

   entry: ['webpack/hot/poll?1000', options.entry],
   

2. 修正ESM模块的导入格式
   nodeExternals的importType配置生成的导入语句缺少引号，不符合ESM语法规范，修改为：

   importType: (moduleName) => `import '${moduleName}'`,
   

3. 优化RunScriptWebpackPlugin配置
   针对ESM模式，显式声明Node的模块执行参数，确保插件正确处理ESM输出文件：

   new RunScriptWebpackPlugin({ 
     name: options.output.filename, 
     autoRestart: false,
     execArgv: ['--experimental-modules']
   }),
   

4. 补充应用入口的HMR处理逻辑
   在main.ts中添加HMR适配代码，确保应用能正确响应热更新：

   import { NestFactory } from '@nestjs/core';
   import { AppModule } from './app.module';
   
   async function bootstrap() {
     const app = await NestFactory.create(AppModule);
     await app.listen(3000);
   
     if (module.hot) {
       module.hot.accept();
       module.hot.dispose(() => app.close());
     }
   }
   bootstrap();
   

完成以上调整后重启开发服务，频繁的[HMR] Nothing hot updated提示会消失，热重载功能也能正常工作。

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