Anonymous Creator
Anonymous Creator

Reputation: 3789

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

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.

 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.

Upvotes: 0

Views: 50

Answers (0)

Related Questions