nest start --watch not reloading after changes (nest start --watch not working)

Question

I have a nest.js installation. When I run npm run start:dev (which runs start --watch) everything works fine and the green logs appear.

The thing is that when I update something in the code, nest does not update anymore and it gets stuck in the following image:

I am sure this is not an issue with my code as I am having the same problem in all my nest.js repositories. I had also deleted node_modules and reinstalled them and it did not work.

I have also tried to reinstall the nest CLI globally.

My node version is 16.5.0 and npm 8.5.0

Here is my package.json:

{
  "name": "unigow-backend",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "prebuild": "env-cmd -f .env.production rimraf dist",
    "build": "env-cmd -f .env.production nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "env-cmd -f .env.development nest start --watch",
    "start:debug": "env-cmd -f .env.development nest start --debug --watch",
    "start:prod": "env-cmd -f .env.production node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
  "dependencies": {
    "@nestjs/common": "^8.3.0",
    "@nestjs/core": "^8.0.0",
    "@nestjs/mapped-types": "^1.0.1",
    "@nestjs/mongoose": "^8.0.1",
    "@nestjs/platform-express": "^8.0.0",
    "@types/dotenv": "^8.2.0",
    "@types/luxon": "^2.0.9",
    "@types/mongoose": "^5.11.97",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.13.2",
    "dateformat": "^5.0.1",
    "dotenv": "^10.0.0",
    "env-cmd": "^10.1.0",
    "luxon": "^1.28.0",
    "moment": "^2.29.1",
    "moment-range": "^4.0.2",
    "mongoose": "^5.13.9",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rrule": "^2.6.8",
    "rxjs": "^7.2.0",
    "sib-api-v3-sdk": "^8.2.1",
    "stripe": "^8.183.0",
    "twilio": "^3.69.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@nestjs/cli": "^8.0.0",
    "@nestjs/schematics": "^8.0.0",
    "@nestjs/testing": "^8.0.0",
    "@types/express": "^4.17.13",
    "@types/jest": "^26.0.24",
    "@types/node": "^16.0.0",
    "@types/supertest": "^2.0.11",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "eslint": "^7.30.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "jest": "27.0.6",
    "prettier": "^2.3.2",
    "supertest": "^6.1.3",
    "ts-jest": "^27.0.3",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "tsconfig-paths": "^3.10.1",
    "typescript": "^4.3.5"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
  }
}

Here is my ts config:

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true
  }
}

Here is my tsconfig.build:

{
  "extends": "./tsconfig.json",
  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
}

Answer 1

I had a similar issue. In my case I was running WSL v2 and my test folder was still on my Windows partition. A know issues that file access speeds under WSL2 are terrible.

Running npm run start:dev from git-bash or powershell worked as expected, plus much improved initial compliation time.

For WSL, CD to your root and and then create your development folder from there. The compile time will be improved and npm run start:dev works out of the box with none of the hot reload config needed.

Answer 2

I had the same issue at the beginning. but then I used "nest g resource your_resource_name" and after that it worked just fine. for an example, after creating a nest js project. Say you want to create another controller, service and module named "User" so write this command on terminal:

nest g resource resource User

or you can visit this link to better understanding. Hope this might help you.

Answer 3

I think instead of altering the webpack configs it might be a better choice to override the build mechanism via the cli command flag. This way your production build is the same using webpack but in dev mode you compile typescript into your /dist directory. This also means one less file [webpack.config.js] that you don't need to maintain in your repo 😋

Override command scripts:

nest start --tsc --watch

Answer 4

I had the same issue with nodemon on windows machine and now with nest.js. All what i have to to is run nodemon in Legacy Mode, add -L flag. E.g. nodemon -L ./src/index.js.
Maybe it's some help.
Any ideas how to run nest.js app in legacy mode ?

Answer 5

I have the same issue with nestjs.

I don't know exactly what the problem is.

But this is how I solved it.

First, install the required packages:

npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack

Once the installation is complete, create a webpack-hmr.config.js file in the root directory of your application.

/* webpack-hmr.config.js file */
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 }),
    ],
  };
};

open the application entry file (main.ts) and add the following webpack-related instructions:

declare const module: any;

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();

To simplify the execution process, add a script to your package.json file.

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

Now open your command line and run the following command:

npm run dev

Hot Reload with webpack

Answer 6

You need to follow these steps and it will recompile the changes without having to restart the server again.

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