Nodemon is incompatible with blessed.

[JounQin]

Please provide a description of the bug / issue, and provide the details below:

It is inserting a lot of characters when using nodemon to start dashboard

====================================================================

If the issue is visual, please provide screenshots here

Original and Longer Gif

Steps to reproduce the problem

1. install nodemon
2. run dev script:

   nodemon --execute "webpack-dashboard -- webpack-dev-server"

3. move mouse or enter keyboard

====================================================================

More Details

• What operating system are you on?
  macOS 10.13
• What terminal application are you using?
  system terminal + zsh + oh-my-zsh
• What version of webpack-dashboard are you using?
  ^1.0.0
• What is the output of running echo $TERM?
  xterm-256color

[ryan-roemer]

Can you please create a minimal repository with code + install + steps to reproduce the error so that we can see it too? Thanks!

[pk-pranshu]

I have the same issue with nodemon. The gif is perfect for an example

[JounQin]

@ryan-roemer It should be very easy to add nodemon in every project and reproduce this issue.
Or you can check https://github.com/JounQin/ng-study/tree/webpack-dashboard and run

yarn
yarn dev

Then you will see this issue.

[ryan-roemer]

Thanks for the repository! Unfortunately, I am now able to confirm that this is an incompatibility between nodemon and blessed (the library webpack-dashboard uses under the hood for terminal magic). This is a similar issue to the incompatibility in shelljs we found in #214

You may want to search issues on nodemon (and they have tried fixes for webpack-dashboard in the past) with https://github.com/remy/nodemon/search?q=blessed&type=Issues&utf8=%E2%9C%93 -- or create a new one. If there is some hack / option that would help on the webpack-dashboard that you find from research, we'd definitely be open for incorporating that here.

But unfortunately, when I take your repository and completely remove webpack-dashboard and just use a super-simple example in the blessed project like:

diff --git a/package.json b/package.json
index 15d1f85..516bc08 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   "author": "JounQin <admin@1stg.me>",
   "license": "MIT",
   "scripts": {
-    "dev": "nodemon --exec \"webpack-dashboard -- webpack-dev-server\"",
+    "dev": "nodemon --exec \"node node_modules/blessed/example/simple-form.js\"",
     "build": "rimraf dist && cross-env NODE_ENV=production webpack --colors --progress -p",
     "tslint": "tslint -p . -e 'node_modules/**' -t stylish '**/*.ts'",
     "stylelint": "stylelint **/**/*.scss",
@@ -25,6 +25,7 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "blessed": "^0.1.81",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.18"
   },

Running yarn dev produces the exact same gibberish text you are seeing: