GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
https://npm.im/critters-webpack-plugin
Apache License 2.0
3.42k stars 108 forks source link

Cannot read properties of undefined (reading 'setAttribute') #135

Open mgalasso opened 1 year ago

mgalasso commented 1 year ago

In Angular 16, during a build (ng build), there is an unhandled error within critters.js:519:30

Here is the code snippet within critters.js: if (!crittersContainer) { document.documentElement.setAttribute('data-critters-container', ''); crittersContainer = document.documentElement; }

Here is the error message: [error] TypeError: Cannot read properties of undefined (reading 'setAttribute') at createDocument (C:\Development\sourcecode\sequoia\node_modules\critters\dist\critters.js:519:30) at CrittersExtended.process (C:\Development\sourcecode\sequoia\node_modules\critters\dist\critters.js:1123:22) at InlineCriticalCssProcessor.process (C:\Development\sourcecode\sequoia\node_modules\@angular-devkit\build-angular\src\utils\index-file\inline-critical-css.js:167:40) at C:\Development\sourcecode\sequoia\node_modules\@angular-devkit\build-angular\src\utils\index-file\index-html-generator.js:123:64 at IndexHtmlGenerator.process (C:\Development\sourcecode\sequoia\node_modules\@angular-devkit\build-angular\src\utils\index-file\index-html-generator.js:65:34) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async execute (C:\Development\sourcecode\sequoia\node_modules\@angular-devkit\build-angular\src\builders\browser-esbuild\index.js:107:47) at async withSpinner (C:\Development\sourcecode\sequoia\node_modules\@angular-devkit\build-angular\src\tools\esbuild\utils.js:73:16) at async buildEsbuildBrowserInternal (C:\Development\sourcecode\sequoia\node_modules\@angular-devkit\build-angular\src\builders\browser-esbuild\index.js:207:18) at async handleAsyncIterator (C:\Development\sourcecode\sequoia\node_modules\@angular-devkit\architect\src\api.js:35:28)

As a consequence, the index.html cannot be built within the Angular project. (Index html generation failed.)

scifresh commented 1 year ago

i get a similar one with angular 16. and yes, only on ng build. the ng serve works perfect

✖ Index html generation failed. document.documentElement.setAttribute is not a function

marco910 commented 12 months ago

I'm facing the same issue in Next.js 13 and critters@0.0.20. It only happens with server-side rendering in some cases

TheElegantCoding commented 8 months ago

same here in vite

saenif commented 6 months ago

same here. Angular 17. ng serve working perfectly. ng build failling with Index html generation failed. Cannot read properties of undefined (reading 'setAttribute') error

briouyaasmae commented 5 months ago

Same here with Angular 17

KRS-envisageworld commented 3 months ago

Also, facing the same issue while building the application. Does anyone know the root cause of this error?