Error `Cannot read property 'clear' of undefined`
Closed this issue · 7 comments
The following error happens in some builds:
Failed to inline critical CSS.
Evaluation failed: TypeError: Cannot read property 'clear' of undefined
at isElementAboveFold (__puppeteer_evaluation_script__:20:44)
at isSelectorCritical (__puppeteer_evaluation_script__:62:11)
at Array.filter (<anonymous>)
at filterSelectors (__puppeteer_evaluation_script__:72:27)
at pruneNonCriticalSelectors (__puppeteer_evaluation_script__:77:10)
__puppeteer_evaluation_script__:20:44 isElementAboveFold
__puppeteer_evaluation_script__:62:11 isSelectorCritical
__puppeteer_evaluation_script__:72:27 filterSelectors
__puppeteer_evaluation_script__:77:10 pruneNonCriticalSelectors
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/ExecutionContext.js:121:13 ExecutionContext.evaluateHandle
internal/process/task_queues.js:97:5 processTicksAndRejections
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/ExecutionContext.js:48:20 async ExecutionContext.evaluate
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/lib/core.js:461:27 async
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/helper.js:110:27 ExecutionContext.<anonymous>
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/ExecutionContext.js:48:31 ExecutionContext.evaluate
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/helper.js:111:23 ExecutionContext.<anonymous>
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/DOMWorld.js:112:20 DOMWorld.evaluate
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/helper.js:110:27 Frame.<anonymous>
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/Page.js:782:43 Page.evaluate
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/node_modules/puppeteer/lib/helper.js:111:23 Page.<anonymous>
/opt/buildhome/.netlify-build-plugins/node_modules/penthouse/lib/core.js:461:38
Do you know what the problem might be?
It seems like this comes from here:
https://github.com/pocketjoso/penthouse/blob/1f793df68b766ec2bf6281a110809fee3b3b97b2/src/browser-sandbox/pruneNonCriticalSelectors.js#L23:L24
This script is evaluated by puppeteer, it seems like element.style is undefined, which afaik cannot happen since all DOM elements have a style attribute pointing to a CSS sheet, even non-visual elements.
I first thought it could also happen if somehow the element was removed from the DOM before being processed (as penthouse loops over a document.querySelector('…') list), but even if you remove an element from the DOM, the node list isn’t updated, so element.style cannot be undefined 🤷♂️
The catch block to this evaluation is found here. It seems like it’s not an errorDueToPageUnloaded otherwise the error message would start with PAGE_UNLOADED_DURING_EXECUTION: …
debuglog('pruneNonCriticalSelector threw an error: ' + err)
const errorDueToPageUnloaded = PUPPETEER_PAGE_UNLOADED_DURING_EXECUTION_ERROR_REGEX.test(
err
)
cleanupAndExit({
error: errorDueToPageUnloaded
? new Error(PAGE_UNLOADED_DURING_EXECUTION_ERROR_MESSAGE)
: err
})
returnI feel like this issue should be filed directly on the penthouse repository 🤔
Is there not more info in the logs? Like the element/its selector? If not, I’ll try to open an issue on the penthouse repo, where I’ll also ask about the other lingering process issue.
Unfortunately not more information.
The repository is private. And there was no output before this error message.
No inputs were specified for this plugin.
The build command was jekyll build --lsi and it completed successfully before this plugin.
Okay. I think for now I’ll leave this open and see if, as it sees more usage, more people face this issue.
Did you see this happening again @ehmicky ?
No it happened only that one time.
I’ll close for now, we can reopen.
Hi! I'm getting this on version 1.2.0:
1:47:32 PM: ────────────────────────────────────────────────────────────────
1:47:32 PM: Plugin "netlify-plugin-inline-critical-css" failed
1:47:32 PM: ────────────────────────────────────────────────────────────────
1:47:32 PM:
1:47:32 PM: Error message
1:47:32 PM: Error: Evaluation failed: TypeError: Cannot read property 'clear' of undefined
1:47:32 PM:
1:47:32 PM: Plugin details
1:47:32 PM: Package: netlify-plugin-inline-critical-css
1:47:32 PM: Version: 1.2.0
1:47:32 PM: Repository: git+https://github.com/Tom-Bonnike/netlify-plugin-inline-critical-css.git
1:47:32 PM: npm link: https://www.npmjs.com/package/netlify-plugin-inline-critical-css
1:47:32 PM: Report issues: https://github.com/Tom-Bonnike/netlify-plugin-inline-critical-css/issues
1:47:32 PM:
1:47:32 PM: Error location
1:47:32 PM: In "onPostBuild" event in "netlify-plugin-inline-critical-css" from netlify.toml
1:47:32 PM: at isElementAboveFold (__puppeteer_evaluation_script__:20:44)
1:47:32 PM: at isSelectorCritical (__puppeteer_evaluation_script__:62:11)
1:47:32 PM: at filterSelectors (__puppeteer_evaluation_script__:72:27)
1:47:32 PM: at pruneNonCriticalSelectors (__puppeteer_evaluation_script__:77:10)
1:47:32 PM: at ExecutionContext._evaluateInternal (/.netlify/plugins/node_modules/puppeteer/lib/ExecutionContext.js:122:13)
1:47:32 PM: at async ExecutionContext.evaluate (/.netlify/plugins/node_modules/puppeteer/lib/ExecutionContext.js:48:12)
1:47:32 PM: at async /.netlify/plugins/node_modules/penthouse/lib/core.js:461:27
1:47:32 PM: -- ASYNC --
1:47:32 PM: at DOMWorld.evaluate (/.netlify/plugins/node_modules/puppeteer/lib/DOMWorld.js:112:20)
1:47:32 PM: -- ASYNC --
1:47:32 PM: at Page.evaluate (/.netlify/plugins/node_modules/puppeteer/lib/Page.js:860:43)
1:47:32 PM: at /.netlify/plugins/node_modules/penthouse/lib/core.js:461:38
There aren't any logs that would suggest this is specific to my setup, so I'm guessing it's something to do with this package's dependencies. Happy to share more details if needed.