A critical error: Chromium revision is not downloaded.
I have been trying to get critical to work on my Mac but kept getting the following error when my webpack configuration hit the point where it was trying to configure the Critical 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 fixing this by following the instructions,
npm install, but the error continued to happen.
The path to getting this fixed had several steps and I thought they might be helpful to my future self or someone else, so I’m documenting them here.
Clue 1: A new MacBook #
The work I’m doing is on a new MacBook Pro. In setting up the machine, I’d installed all the various dev tools I use, including Docker.
Clue 2: Docker is required for Critical #
Even though I installed Docker, I’m not a regular Docker user. I wanted to have it installed because using Docker is something I aspire to do “when I get to it.” Even though I don’t use it, Docker is a requirement when using HTML Critical Webpack Plugin, the plugin extracts critical CSS when using webpack. Having it installed seemed like a necessary thing.
My theory: I missed installation errors #
When doing my initial installation of the Node packages in my project, I must have missed installation errors along the way. Normally when installing
html-critical-webpack-plugin, Chromium would be installed using Docker. You can read the Docker requirement here in the documentation.
I had Docker installed, but it turns out I had never actually opened the program since installing it. Upon initial installation of Docker on a Mac, you are prompted with several dialog boxes that you need to go through before it will actually run. So, I opened Docker on my Mac and click through the dialog boxes and then Docker was running on my machine.
I thought I’d figured out the problem.
I then tried to
npm install in my project. I thought this would fix the issue. The installation process completed, but when I tried to build my webpack project, I hit the same error.
A clean install #
After a few moments of frustration, I decided that perhaps wiping out my
node_modules directory completely and forcing a full installation of every package would be worth a try.
As I watched the installation process go through its paces, I was pleased to see it hit a point where Chromium was being installed. This is the piece I must have missed on the initial installation of packages. When this reinstallation of my node modules finished, I tried to build my webpack production configuration again and the critical CSS was generated without a hiccup. Success!
Link to this page