Messed up progress bars when installing npm packages inside ansi-term

Question

I use ansi-term for all my npm and yeoman needs because it sometimes shows up dialogs that shell-mode cannot handle. It works pretty well, until I installed a package and it showed up a messed up download progress bar. Pardon the ugly output, but it looks like this:

pngquant-bin@0.1.6 postinstall /Users/avendael/tmp/yo-angular/node_modules/pngquant-bin node lib/check.js

pngquant: downloading [ ] 3% 0.0s pngquant: downloading [ ] 3% 0.2s pngquant: downloading [
] 6% 6.7s pngquant: downloading [ ] 6% 6.2s
pngquant: downloading [= ] 9% 8.2s pngquant: downloading [= ] 10% 7.6s pngquant: downloading [= ] 12% 7.6s pngquant: downloading [==
] 13% 8.2s pngquant: downloading [== ] 15% 7.0s pngquant: downloading [== ] 16% 6.9s pngquant: downloading [=== ] 19% 6.8s pngquant: downloading [=== ] 19% 7.1s pngquant: downloading [=== ] 22% 6.5s pngquant: downloading [====
] 23% 6.2s pngquant: downloading [==== ] 25% 6.4s
pngquant: downloading [==== ] 26% 6.3s pngquant: downloading [===== ] 28% 5.9s pngquant: downloading [===== ] 29% 6.3s pngquant: downloading [=====
] 31% 6.0 pngquant: downloading [===== ] 32% 5.9s
pngquant: downloading [====== ] 34% 5.7s pngquant: downloading [====== ] 36% 5.6s pngquant: downloading [======= ] 38% 5.5s pngquant: downloading [=======
] 39% 5.3s pngquant: downloading [======= ] 41% 5.2s
pngquant: downloading [======= ] 42% 5.1s pngquant: downloading [======= = ] 44% 4.9s pngquant: downloading [======== ] 45% 4.7s pngquant: downloading [======== ] 47% 4.6s
pngquant: downloading [========= ] 49% 4.5s pngquant: download ing [========= ] 50% 4.3s pngquant: downloading [========= ] 52% 4.1s pngquant: downloading [==========
] 53% 4.0s pngquant: downloading [========== ] 55% 3.8s
pngqua nt: downloading [========== ] 57% 3.7s pngquant: downloading [=========== ] 58% 3.5s pngquant: downloading [=========== ] 60% 3.4s pngquant: downloading [===========
] 62% 3 .2s pngquant: downloading [============ ] 63% 3.1s
pngquant: downloading [============ ] 65% 2.9s pngquant: downloading [============ ] 66% 2.8s pngquant: downloading [============= ] 68% 2.6s pngquant: downloading [============= ] 69% 2.5s pngquant: downloading [============= ] 71% 2.3s pngquant: downloading [============== ] 73% 2.2s pngquant: downloading [== ============ ] 75% 2.0s pngquant: downloading [============== ] 76% 1.9s pngquant: downloading [=============== ] 78% 1.7s
pngquant: downloading [=============== ] 79% 1.6s pngquant: dow nloading [=============== ] 81% 1.4s pngquant: downloading [=============== ] 82% 1.3s pngquant: downloading [================ ] 84% 1.2s pngquant: downloading [================ ] 85% 1.1s p ngquant: downloading [================= ] 92% 0.6s pngquant: downloading [===================] 98% 0.1s pngquant: downloading [===================] 100% 0.0s

✓ pre-build test passed successfully pngquant-bin@0.1.6 node_modules/pngquant-bin

I tried it out in a terminal and it looks like a normal progress bar, with bars moving to the right as the download goes on.

I also tried installing the same package inside shell-mode, and the output (again, pardon the ugliness) looks like this:

pngquant-bin@0.1.6 postinstall /Users/avendael/tmp/yo-angular/node_modules/pngquant-bin node lib/check.js

[1G[0J [1G pngquant: downloading [ ] 3% 0.0s[1G[0J [1G pngquant: downloading [ ] 3% 0.2s[1G[0J [1G pngquant: downloading [ ] 6% 8.7s[1G[0J [1G pngquant: downloading [ ] 6% 8.0s[1G[0J [1G pngquant: downloading [= ] 9% 6.2s[1G[0J [1G pngquant: downloading [= ] 10% 5.7s[1G[0J [1G pngquant: downloading [= ] 12% 4.9s[1G[0J [1G pngquant: downloading [== ] 13% 4.6s[1G[0J [1G pngquant: downloading [== ] 15% 6.2s[1G[0J [1G pngquant: downloading [== ] 16% 5.9s[1G[0J [1G pngquant: downloading [=== ] 19% 5.3s[1G[0J [1G pngquant: downloading [=== ] 19% 5.0s[1G[0J [1G pngquant: downloading [=== ] 22% 4.6s[1G[0J [1G pngquant: downloading [==== ] 23% 4.4s[1G[0J [1G pngquant: downloading [==== ] 25% 6.1s[1G[0J [1G pngquant: downloading [==== ] 26% 5.8s[1G[0J [1G pngquant: downloading [===== ] 32% 4.4s[1G[0J [1G pngquant: downloading [======= ] 39% 3.3s[1G[0J [1G pngquant: downloading [======= ] 41% 3.2s[1G[0J [1G pngquant: downloading [======= ] 42% 3.1s[1G[0J [1G pngquant: downloading [======== ] 44% 2.9s[1G[0J [1G pngquant: downloading [======== ] 45% 2.8s[1G[0J [1G pngquant: downloading [======== ] 47% 2.7s[1G[0J [1G pngquant: downloading [========= ] 49% 2.6s[1G[0J [1G pngquant: downloading [========= ] 50% 2.5s[1G[0J [1G pngquant: downloading [========= ] 52% 2.5s[1G[0J [1G pngquant: downloading [========== ] 53% 2.4s[1G[0J [1G pngquant: downloading [========== ] 55% 2.2s[1G[0J [1G pngquant: downloading [========== ] 57% 2.1s[1G[0J [1G pngquant: downloading [=========== ] 58% 2.0s[1G[0J [1G pngquant: downloading [=========== ] 60% 2.0s[1G[0J [1G pngquant: downloading [=========== ] 62% 1.9s[1G[0J [1G pngquant: downloading [============ ] 63% 1.8s[1G[0J [1G pngquant: downloading [============ ] 65% 1.7s[1G[0J [1G pngquant: downloading [============ ] 66% 1.6s[1G[0J [1G pngquant: downloading [============= ] 68% 1.5s[1G[0J [1G pngquant: downloading [============= ] 69% 1.5s[1G[0J [1G pngquant: downloading [============= ] 71% 1.3s[1G[0J [1G pngquant: downloading [============== ] 73% 1.3s[1G[0J [1G pngquant: downloading [============== ] 75% 1.2s[1G[0J [1G pngquant: downloading [============== ] 76% 1.1s[1G[0J [1G pngquant: downloading [=============== ] 78% 1.0s[1G[0J [1G pngquant: downloading [=============== ] 79% 1.0s[1G[0J [1G pngquant: downloading [=============== ] 81% 0.9s[1G[0J [1G pngquant: downloading [=============== ] 82% 0.8s[1G[0J [1G pngquant: downloading [================ ] 84% 0.7s[1G[0J [1G pngquant: downloading [================ ] 85% 0.7s[1G[0J [1G pngquant: downloading [================= ] 88% 0.6s[1G[0J [1G pngquant: downloading [================= ] 88% 0.5s[1G[0J [1G pngquant: downloading [================= ] 91% 0.4s[1G[0J [1G pngquant: downloading [================= ] 92% 0.4s[1G[0J [1G pngquant: downloading [================== ] 94% 0.3s[1G[0J [1G pngquant: downloading [================== ] 95% 0.2s[1G[0J [1G pngquant: downloading [================== ] 97% 0.1s[1G[0J [1G pngquant: downloading [===================] 98% 0.1s[1G[0J [1G pngquant: downloading [===================] 100% 0.0s

✓ pre-build test passed successfully

It's pretty much the same but this time, there's a ^[[1G^[[0J ^[[1G after each bar. Any idea what's causing this?

Here's how ansi-terms stty looks like:

speed 9600 baud;
lflags: echoe echoke echoctl pendin
oflags: -oxtabs
cflags: cs8 -parenb
erase   kill    
<undef> <undef> 

shell-mode looks like this:

speed 9600 baud;
lflags: -echo echoe echoke echoctl
oflags: -onlcr -oxtabs
cflags: cs8 -parenb
erase   kill    
<undef> <undef> 

osx terminal's stty:

speed 9600 baud;
lflags: -echo echoe echoke echoctl
oflags: -onlcr -oxtabs
cflags: cs8 -parenb
erase   kill    
<undef> <undef> 

Answer 1

Disable the spinner. The easiest way to do this is:

$ npm config set spin false

If colour is a problem:

$ npm config set color false

Finally, if you have issues with your JavaScript prompt:

$ export NODE_NO_READLINE=1
$ node
>

Hope this helps.