A critical error: Chromium revision is not downloaded.

I have been try­ing to get crit­i­cal to work on my Mac but kept get­ting the fol­low­ing error when my web­pack con­fig­u­ra­tion hit the point where it was try­ing to con­fig­ure the Crit­i­cal CSS.

Error: Chromium revision is not downloaded. Run "npm install" or "yarn install" at Launcher.launch (/Users/john/Sites/craft-w-webpack/node_modules/puppeteer/lib/Launcher.js:119:15)

I tried fix­ing this by fol­low­ing the instruc­tions, npm install, but the error con­tin­ued to hap­pen.

The path to get­ting this fixed had sev­er­al steps and I thought they might be help­ful to my future self or some­one else, so I’m doc­u­ment­ing them here.

Clue 1: A new Mac­Book #

The work I’m doing is on a new Mac­Book Pro. In set­ting up the machine, I’d installed all the var­i­ous dev tools I use, includ­ing Dock­er. 

Clue 2: Dock­er is required for Crit­i­cal #

Even though I installed Dock­er, I’m not a reg­u­lar Dock­er user. I want­ed to have it installed because using Dock­er is some­thing I aspire to do ​“when I get to it.” Even though I don’t use it, Dock­er is a require­ment when using HTML Crit­i­cal Web­pack Plu­g­in, the plu­g­in extracts crit­i­cal CSS when using web­pack. Hav­ing it installed seemed like a nec­es­sary thing.

My the­o­ry: I missed instal­la­tion errors #

When doing my ini­tial instal­la­tion of the Node pack­ages in my project, I must have missed instal­la­tion errors along the way. Nor­mal­ly when installing critical and html-critical-webpack-plugin, Chromi­um would be installed using Dock­er. You can read the Dock­er require­ment here in the doc­u­men­ta­tion.

I had Dock­er installed, but it turns out I had nev­er actu­al­ly opened the pro­gram since installing it. Upon ini­tial instal­la­tion of Dock­er on a Mac, you are prompt­ed with sev­er­al dia­log box­es that you need to go through before it will actu­al­ly run. So, I opened Dock­er on my Mac and click through the dia­log box­es and then Dock­er was run­ning on my machine.

I thought I’d fig­ured out the prob­lem.

I then tried to npm install in my project. I thought this would fix the issue. The instal­la­tion process com­plet­ed, but when I tried to build my web­pack project, I hit the same error. 

A clean install #

After a few moments of frus­tra­tion, I decid­ed that per­haps wip­ing out my node_modules direc­to­ry com­plete­ly and forc­ing a full instal­la­tion of every pack­age would be worth a try. 

As I watched the instal­la­tion process go through its paces, I was pleased to see it hit a point where Chromi­um was being installed. This is the piece I must have missed on the ini­tial instal­la­tion of pack­ages. When this rein­stal­la­tion of my node mod­ules fin­ished, I tried to build my web­pack pro­duc­tion con­fig­u­ra­tion again and the crit­i­cal CSS was gen­er­at­ed with­out a hic­cup. Suc­cess!