Deprecated Hot Reload Docs

[MostafaYehia]

Bug Report

Current behavior

Error Invalid options object. Watch Ignore Plugin has been initialized using an options object that does not match the API schema.

• options[0] misses the property 'paths'. Should be:
  [RegExp | string, ...] (should not have fewer than 1 item)
  -> A list of RegExps or absolute paths to directories or files that should be ignored.
• options[1] misses the property 'paths'. Should be:
  [RegExp | string, ...] (should not have fewer than 1 item)
  -> A list of RegExps or absolute paths to directories or files that should be ignored.

Input Code

plugins: [
            ...options.plugins,
            new webpack.WatchIgnorePlugin([/\.js$/, /\.d\.ts$/]),
            ...
]

Expected behavior

Possible Solution

plugins: [
            ...options.plugins,
            new webpack.WatchIgnorePlugin({
                paths: [/\.js$/, /\.d\.ts$/]
            }),
            .
            .
],

Environment

Nest CLI version: 7.5.2 (Latest)

 
For Tooling issues:
- Node version: 12.14.0 
- Platform:  Windows 

Others:

[kamilmysliwiec]

Would you like to create a PR for this issue?

[Tony133]

@kamilmysliwiec, I did this pull #1568 for this problem in the documentation

I hope it will go well :-)

[dieison-depra]

Did it was work for me! Thanks.

[PurpleEyeGH]

Not work for me.

[Tony133]

I write here the message I wrote in the pull, so I can clarify the problem as there is a bit of confusion

if you use nest 7.5, use webpack 5 and the solution is correct but you need to install
start-server-nestjs-webpack-plugin instead of start-server-webpack-plugin

Installation:

$ npm i --save-dev webpack-node-externals start-server-nestj-webpack-plugin

and create file webpack-hmr.config.js

const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const StartServerPlugin = require('start-server-nestjs-webpack-plugin');

module.exports = function(options) {
  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 StartServerPlugin({ name: options.output.filename }),
    ],
  };
};

In package.json change "npm start: dev" like so:

"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js"

I add a reference which may be helpful to this problem: ---> nestjs/nest#5706

This is the pull related to this issue #1568

[brandon-leapyear]

✨ This is an old work account. Please reference @brandonchinn178 for all future communication ✨

---

Copied from #5928

So I actually got it working by replacing webpack-node-externals with webpack-pnp-externals. In summary, the following instructions get hot-reload to work with yarn 2 (modulo deprecation warnings):

yarn add -D webpack-pnp-externals run-script-webpack-plugin [email protected] (completely replaces the existing npm install instruction in the docs)

Add the following webpack-hmr.config.js file:

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

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

The differences with the webpack-hmr.config.js in the docs are:

• Use RunScriptWebpackPlugin instead of StartServerWebpackPlugin (StartServerWebpackPlugin incompatible with Webpack 5)
• Fix WatchIgnorePlugin to use paths key
• Use WebpackPnpExternals instead of webpack-node-externals (yarn 2 does not have a node_modules directory)

Change start:dev script as usual

In total, to resolve this issue, I'd recommend adding the above instructions to the NestJS docs about Hot Reload for Yarn v2, as well as fixing the DEP_WEBPACK_WATCH_WITHOUT_CALLBACK deprecation message (i believe this happens even without Yarn v2)

[asciidiego]

@brandon-leapyear I followed your instructions and I get the following error:

> nest build --webpack --webpackPath webpack-hmr.config.js

 Error  The 'compilation' argument must be an instance of Compilation

[Tony133]

Hi @gergelypap, If you have time, you can leave a minimal reproduction of a clonable git repository with the problem?

[gergelypap]

@Tony133 I am sorry. On a fresh install of Nest typescript starter, and applying your solution from #1554 (comment), I confirm hot reloading works.

Docs should still be updated though.

[kamilmysliwiec]

Let's track this here #1621

[roboflank]

@m4r4c00ch0 Regarding the error Error The 'compilation' argument must be an instance of Compilation, I solved this by using [email protected]