Cannot read property 'children' of null

[bkdotcom]

Information:

• Prism version: 1.19.0
• Plugins: https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+json+markup-templating+php+php-extras+sql&plugins=line-highlight+line-numbers
• Environment: Chrome 79

Description
Error thrown in console

Uncaught TypeError: Cannot read property 'children' of null`
 at Object.getLine

Example
I'll attempt to create one... I can't tell what's triggering this issue

[RunDevelopment]

From the error logged, I see that this line is the problem but the function getLine itself isn't being used by Line Numbers, so Line Highlight is the cause of the problem. (I assume that you don't call the function getLine manually.)

But that's about as much as I can help you with the information you provided. The problem is that the Line Highlight plugin seems to be executed before the Line Numbers plugin, which means that Line Highlight will try to the line numbers of a code block that don't yet exist.

Is that really the full stack trace of the error?

[RunDevelopment]

Cannot reproduce + no further information provided

[bkdotcom]

Looks to be triggered via resizing the window

Is there a codepen or jsfiddle template for creating the issue with the necessary plugins?

unrelated..
https://github.com/PrismJS/prism/releases
says the latest release is v1.16.0 ?

[RunDevelopment]

No, there isn't a template. You can also upload a .zip file with a little project. Anything that reproduces the issue is fine.

---

unrelated...

Will fix.

[bkdotcom]

@RunDevelopment

sorry for the delay.. I've just been living with the console errors..
upgraded to 1.22... still see the issue, so tracked down the cause

I'm using the manual option... due to hidden/dynamic content

Prism.manual = true;

line number plugin is listening for window resize

window.addEventListener('resize', function () {
	var actions = $$('pre[data-line]').map(function (pre) {
		return highlightLines(pre);
	});
	actions.forEach(callFunction);
});

which appears to try to iterate over all pre[data-line].. assuming prism has already rendered the output.. in order to re-render the line numbers...

but it can't re-render what hasn't been rendered to begin with

var lineNumberRows = element.querySelector('.line-numbers-rows');  // null if not yet rendered
...
// Uncaught TypeError: Cannot read property 'children' of null
var lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);   

resize listener should additionally filter pre[data-line] and only call highlightLines on code that's already been highlighted

[RunDevelopment]

Thank you for the detailed explanation! I'll make a fix.

[bkdotcom]

Awesome!
Thanks