NestJs HMR not working with "type": "module"

[hnviradiya]

Is there an existing issue that is already proposing this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe it

Refer this #14312 as this is duplicate of that and action suggested on that has already been taken but it didn't help.

I have a issue with HMR when I use "type": "module" in package.json. Below is the full description.

I followed NestJs HMR using webpack using following url.

https://docs.nestjs.com/recipes/hot-reload

It works fine when we use "type": "commonjs" in package.json.

Unfortunately I have monorepo with client app that uses "type": "module"

When I run nest build --webpack --webpackPath webpack-hmr.config.js --watch

I get below error.

 Error  require() of ES Module my-project\webpack-hmr.config.js from \node_modules\@nestjs\cli\actions\build.action.js not supported.
webpack-hmr.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename webpack-hmr.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

That is because I used require and module.exports with "type": "module"

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

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
    ],
  };
};

So I converted them to import and export default as below

import nodeExternals from 'webpack-node-externals';
import { RunScriptWebpackPlugin } from 'run-script-webpack-plugin';

export default (options, webpack) => {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
    ],
  };
};

Now I get following and for that part I am not sure how to solve it as I don't seem to find way to work with module type with webpack nest cli.

 Error  require() of ES Module webpack-hmr.config.js from \node_modules\@nestjs\cli\actions\build.action.js not supported.
Instead change the require of webpack-hmr.config.js in \node_modules\@nestjs\cli\actions\build.action.js to a dynamic import() which is available in all CommonJS modules.

Have posted same on stackoverflow and also asked chatgpt if there is way to work with this but couldn't find any.
https://stackoverflow.com/questions/79269058/nestjs-hmr-not-working-with-type-module

Tried Discord too. But question simlpy got skipped. Probably there is no answer available to this yet and needs support from NestJs team itself.
https://discord.com/channels/520622812742811698/1316338004725596161

Describe the solution you'd like

Webpack HMR should work with "type": "module" in package.json

Teachability, documentation, adoption, migration strategy

user should be able to use es module based webpack config.

import nodeExternals from 'webpack-node-externals';
import { RunScriptWebpackPlugin } from 'run-script-webpack-plugin';

export default (options, webpack) => {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
    ],
  };
};

What is the motivation / use case for changing the behavior?

HMR is quite important to be productive as it saves lots of time. Currently big server side code takes lots of time to reload entire node server.