Uncaught TypeError: e.querySelectorAll is not a function

[leonalkalai]

"Uncaught TypeError: e.querySelectorAll is not a function" on console on reveal.js slider each time i try to use data-line-numbers attribute.

<pre class="codestyle">
<code class="language-html" aria-hidden="true" data-line-numbers="2|4|6|8|10|12">
	<span>&#9193; &#9193; &#9193;    A</span>

	<span>&#9193; &#9193; &#9193;    Shift + Space</span>

	<span>&#9193; &#9193; &#9193;    Control + Alt + U + .</span>

	<span>&#9193; &#9193; &#9193;    Control + Shift + &#39;</span>

	<span>&#9193; &#9193; &#9193;    Alt+Shift+P Control+F</span>
	
	<span>&#9193; &#9193; &#9193;    Meta+C Meta+Shift+C</span>
</code>
</pre>

And i get error

highlight.min.js:1 Uncaught TypeError: e.querySelectorAll is not a function
    at Object.getHighlightedLineBounds (highlight.min.js:1:903503)
    at Object.scrollHighlightedLineIntoView (highlight.min.js:1:902923)
    at Object.Le [as dispatchEvent] (reveal.js:8:83748)
    at reveal.js:8:46814
    at Array.forEach (<anonymous>)
    at x.update (reveal.js:8:46145)
    at x.goto (reveal.js:8:47400)
    at x.prev (reveal.js:8:47874)
    at Object.yt (reveal.js:8:97262)
    at T.onDocumentKeyDown (reveal.js:8:54595)
getHighlightedLineBounds @ highlight.min.js:1
scrollHighlightedLineIntoView @ highlight.min.js:1
Le @ reveal.js:8
(anonymous) @ reveal.js:8
update @ reveal.js:8
goto @ reveal.js:8
prev @ reveal.js:8
yt @ reveal.js:8
onDocumentKeyDown @ reveal.js:8

that points to this line
getHighlightedLineBounds: function(e) {
-> e = e.querySelectorAll(".highlight-line");

This error appears only when you change from the second line to the first and not after the second line when you try to change lines with the keyboard arrow and it happens even with the original template.

https://github.com/hakimel/reveal.js/blob/master/index.html#L351

The only way i found to fix it is using fragments like this and only with many pre elements. If i use one pre element with a code the lines don't get highlighted one by one with the keyboard arrows. The framework just highlights all the code at once.

  <pre class="highlight"><code class="highlight fragment highlight-block featured-code" data-fragment-index="1">&#9193; &#9193; &#9193;    A</code></pre>
  <pre class="highlight"><code class="highlight fragment" data-fragment-index="2">&#9193; &#9193; &#9193;    Shift + Space</code></pre>
  <pre class="highlight"><code class="highlight fragment" data-fragment-index="3">&#9193; &#9193; &#9193;    Control + Alt + U + .</code></pre>
  <pre class="highlight"><code  class="highlight fragment" data-fragment-index="4">&#9193; &#9193; &#9193;    Control + Shift + &#39;</code></pre>
  <pre class="highlight"><code  class="highlight fragment" data-fragment-index="5">&#9193; &#9193; &#9193;    Alt+Shift+P Control+F</code></pre>
  <pre class="highlight"><code class="highlight fragment" data-fragment-index="6">&#9193; &#9193; &#9193;    Meta+C Meta+Shift+C</code></pre>

I have tried everything including all the other ways of the framework documentation and some custom javascript didnt work either as intended. Can you please look into it?

[hakimel]

This should be fixed in bbd0d3e. Give it a try when you get a chance and let me know if you still run into this.

[leonalkalai]

@hakimel i tried with the new pugin.js that you have the change bbd0d3e
but unfortunately i have the same error.
Can you please test it yourself and look out for a fix?

[hakimel]

I just re-ran my test again and it's still fixed for me.

I used the content below to test (from your example). When stepping backwards through all of the highlights there is always an exception. When I try the latest version in master there is no exception.

<div class="reveal">
  <div class="slides">
    <section><pre class="codestyle">
      <code class="language-html" aria-hidden="true" data-line-numbers="2|4|6|8|10|12">
        <span>&#9193; &#9193; &#9193;    A</span>
      
        <span>&#9193; &#9193; &#9193;    Shift + Space</span>
      
        <span>&#9193; &#9193; &#9193;    Control + Alt + U + .</span>
      
        <span>&#9193; &#9193; &#9193;    Control + Shift + &#39;</span>
      
        <span>&#9193; &#9193; &#9193;    Alt+Shift+P Control+F</span>
        
        <span>&#9193; &#9193; &#9193;    Meta+C Meta+Shift+C</span>
      </code>
      </pre></section>
    <section>Slide 2</section>
  </div>
</div>

[leonalkalai]

I only changed my plugin.js file with your plugin https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/plugin.js and i got error.
Do i need to download the whole repo from the start or use some of the other files from the repo also?

[hakimel]

The plugin gets compiled into highlight.js and highlight.esm.js so those are the files you'll want to copy over. You can find them in the same directory: https://github.com/hakimel/reveal.js/tree/master/plugin/highlight

[leonalkalai]

Thank you the error is fixed with the new files.