GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

Home Page:https://npm.im/critters-webpack-plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Simple Example fails

Krutsch opened this issue · comments

The Example in readme:

import Critters from 'critters';

const critters = new Critters({
  // optional configuration (see below)
});

const html = `
  <style>
    .red { color: red }
    .blue { color: blue }
  </style>
  <div class="blue">I'm Blue</div>
`;

const inlined = await critters.process(html);

console.log(inlined);
// "<style>.blue{color:blue}</style><div class=\"blue\">I'm Blue</div>"

fails with this message:

file:///C:/Users/.../node_modules/critters/dist/critters.mjs:519
    document.documentElement.setAttribute('data-critters-container', '');
                             ^

TypeError: Cannot read properties of undefined (reading 'setAttribute')
    at createDocument (file:///C:/Users/.../node_modules/critters/dist/critters.mjs:519:30)
    at Critters.process (file:///C:/Users/.../node_modules/critters/dist/critters.mjs:1123:22)
    at file:///C:/Users/.../test.js:15:32
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async loadESM (node:internal/process/esm_loader:28:7)
    at async handleMainPromise (node:internal/modules/run_main:120:12)

Device: Windows 11, Node.js version 21.6.0