Last week I read about a new vue-cli template worth checking out: the progressive web app (pwa) template. Yesterday I decided to give it a shot and started with

vue-cli init pwa test-pwa

This runs the Vue command line interface to setup the project. The following step is to install the necessary npm packages with

npm install

This usually takes a moment to complete but it does not throw errors, does it? Well, yesterday it did. Scrolling upwards to find what went wrong I stumbled upon some error about js-beautify which could not be found. Weird.

I tried installing another vue-cli package but to no avail. The same problem occurred. Time to do some googling. I ended up at the Github page of js-beautify and found a very recent issue with already > 200 comments. Something is going on here and I am on the right track, I thought.

Reading through all the comments was a tedious task. The thread was spoiled with a lot of “+1” and “me too” comments. These do not really help the people that tune in later and try to figure out if there is a solution or workaround already.

What struck me the most was the angry tone I heard in lots of comments. When starting out with web development and looking at Stack Overflow I have always been amazed by the (mostly) polite tone of people commenting on questions. This time however, people really got angry and comments were not so polite anymore. I guess the break in js-beautify really influenced the workflow of a lot of people.

How did it happen?

In this case, a rather small package maintained by a single developer was updated and apparently not all edge cases were caught by proper tests. Also, no beta releases were setup so the changes were released and directly affected all people installing the package via npm. Thinking

“This should not happen?”

Then you should realize that a lot of packages like js-beautify are created in the spare time of developers. It is possible that a bug pops up and the dev is not there to fix it because he or she is on the day job. They are not doing it on purpose you know!

Another thing I observed is that most people simply don’t read. In the middle of the thread a solution popped up: If you are running an existing project which does not compile anymore due to the break in the latest version of js-beautify, just load the previous version directly in your package.json. A few comments later the question about a solution was repeated over and over again. This made me think about the setup of issues on Github and the behavior of the users. I think that it would be good to only post comments that are directly related to solving or reproducing the bug and that “+1” and “me too” comments do not belong in the thread directly. Instead, the thread itself could benefit from  a “+1” button. This way you can still count the popularity or the relevance of an issue.

Also, at some point several solutions could be found in the comments. However, it became clear that not all readers of the thread understood the solution or couldn’t make it work in their projects. So I think there is some improvement possible on the “solving the issue” side of it. If you have a suggestion for a temporal solution or workaround, be sure to describe it properly (and verbose) so that even someone who has just started using the package can follow along. This will also decrease the urge to comment on proposed solutions in a “this solution does not work for me” way.

Concluding remarks

The number of packages in npm is growing really fast and deeply nested dependencies make it difficult to directly know which packages influence each other. The result is that running a npm install command installs so many different packages that a break in a single package may affect lots of people.

It is great to see how the developer of js-beautify handled this issue when he had the time. Not only was the break quickly fixed and released, several new tasks and discussion points for the next version were added including the need to have a beta channel for releases and a discussion about more people working on the package.

The reactions on Github showed that a lot of people were affected by this bug. Can you do something to avoid being affected by such a problem? It’s probably not so easy. Due to the huge amount of dependencies, it seems impossible to keep track of changes in individual packages. Although the release flow for js-beautify likely improves in the future, there are still many other great packages created and maintained by developers in their spare time. We cannot expect them to be available full-time when something goes wrong.

Thus, as developers and users of packages, we also have a responsibility ourselves. We should incorporate the possibility of ‘something going wrong’ in our own workflow. For example, create a proper testing environment where you can try new versions of packages before using them in production and make sure to know how you can switch back to earlier versions.

In order to answer the question in the title of this blog, off course they did not break the internet. It is true, a mistake was made, and the Vue world was in panic, but at the end of the day the bug was fixed, apologies have been given and we can all continue!