Teaching myself frontend development: What I learned this week

This week I struggled with getting vue to work with the most recent release of tailwind css. I was surprised to stumble into these kinds of problems this early in my first project. Usually, setting up a fresh project is pretty straight forward. But I completely undertestimated the complexity of frontend tooling. I went in with the idea that using straight npm would be a safe bet. However, the tailwind documentation refers to vite and npm.

Here is where I went wrong: I assumed that vite is an abstraction layer ontop of the npm package manager, but I have since realized that’s not the case. In the context of the tailwind css it is also used to replace vue-cli, which provides project scaffolding for vue. And that’s where my problem came from: I was using a “plain old vue proje t”, and thus vue-cli, which still uses an older version of postcss, the package that was creating all the problems. Using vite removes the need for vue-cli, and thus, not conflicting versions of postcss.

The real learning is this:

Contrary to all other package-managers I have previously used, npm is able to install multiple different versions of the same package. This is what tripped me up. I would have expected npm to upgrade all versions of postcss from 7 to 8, so how could I get an error that says that postcss 8 is required? Turns out, vue-cli was actually using this old version of postcss, which was installed by npm in addition to postcss 8.

I guess, in this case it really is a feature, not a bug.

After I learned this “quirk” about npm, I also found out that using npm install is not deterministic – or maybe wasn’t deterministic in the past but is now? I wasn’t able to find definitive information on that. In any case, it seems like it’s best not to use npm install in an automated build pipeline, but rather the aptly named npm ci.

Also: I wonder if using npm dedupe is something people do regularly as part of a build?

Maybe I should also look into yarn? It actually has a command-line --flat switch to disable the installation of multiple versions of a package. 😀