TypeError: Cannot read property 'querySelectorAll' of null

[Jarvis1010]

Upgraded to React 16 last night and now the react highlight throws the above error

[briancappello]

Until a fix gets merged, I've uploaded a branch to my fork that includes the compiled assets. It can be installed like so from package.json:

"dependencies": {
    // ...
    "react-highlight": "briancappello/react-highlight#react-v16-compiled"
}

[mlynch]

@briancappello Thanks for doing that. Unfortunately still seeing issues using your branch. Will add more if I find anything:

[briancappello]

@mlynch Can you share what your code looks like when you're using the Highlight component? I suspect the error you're seeing is related to using a custom element prop, which as best I could tell isn't documented and therefore I just guessed (apparently wrongly :-O) at what kinds of inputs it was supposed to work with.

[mlynch]

@briancappello here's how it's being used:

Where context is a rendered JSX sub-tree with some divs for each line

[briancappello]

@mlynch Interesting, looks to me like it should be working :/

Just to verify the bug really is somewhere in my PR, can you confirm the same code worked with React 0.15, and that no error happens if you do this with React 0.16?:

{context && (
<pre>
  <code className="error-mapped-context typescript">
    {context}
  </code>
</pre>
)}

(It won't render highlighted, but it also shouldn't blow up)

[mlynch]

@briancappello thanks. Yep this worked in React 15, and changing the 16 version to your code above makes it work without issue (no highlighting, of course)

[briancappello]

@mlynch Hrmph. I'm sad to say I'm at a loss on this one :(

[chaoyangnz]

++++++111111

[richburdon]

Broken for me in 16 also.

[davidthornton]

Would be nice to have a fix merged

[alechstong]

@briancappello Thanks for the good work. I am using your branch. everything works except the innerHTML=true option, which doesn't seems to do anything. I managed to find a workaround with html-react-parser, but it is very ugly.

[briancappello]

@alechstong I'm not sure I follow what you needed a workaround for? The innerHTML option is for when you want to highlight a block of trusted, pre-rendered HTML (ie not JSX, but a string of HTML from the backend).

So, without innerHTML, this works (it wraps the children in <pre><code></code></pre>):

<Highlight language="javascript">
  {`function foo() { return 'bar' }`}
</Highlight>

Whereas with innerHTML, there is no automatic wrapping:

<Highlight innerHTML languages={['python', 'javascript']}>
  {`<p>This is a string of HTML. It has multiple blocks of code within it.</p>
   <pre><code>function foo() { return 'like this one' }</code></pre>
   <pre><code>def foo():\n    return 'and this one'</code></pre>
  `}
</Highlight>

[alechstong]

@briancappello Thank you for replying. I tried your snippets, they do work. And I tried to reproduce the problem in my project, but I'm glad to see the problem's gone now. I remember that the innerHTML attrib didn't work for us, so we had to convert the string to react DOM and manually replace the code tag with Highlight. Must be something we did wrong.

[romainbessugesmeusy]

Running React 16.2.0, app created with create-react-app, same error here. Seems to break here :

    highlightCode() {
        const domNode = ReactDOM.findDOMNode(this);
        const nodes = domNode.querySelectorAll('pre code');

[ajGingrich]

I also am having problems in React 16.2 with error Uncaught TypeError: Cannot read property 'querySelectorAll' of null at Highlight.highlightCode (index.js:52) at Highlight.componentDidMount

[discoduke]

I'm also having a problem with this in React 16.2. As far as I can tell, both React.DOM.div and ReactDOM.findDOMNode are now deprecated in React 16. The preferred method is to use {ref} in the render method to store a reference to specific element.

As far as I can tell 'Highlight innerHTML' is still working as expected -- I can see the pre/code elements in the original page source. But when componentDidMount/highlightCode executes (after page load), ReactDOM.findDOMNode(this) returns null.

[briancappello]

@discoduke I believe you are correct. I opened a PR (#43) a while ago that drops the deprecated stuff and uses ref instead. Sadly, I've heard nothing but radio silence from @akiran. See my comment above if you want to try it out.

[gihrig]

@briancappello Your patch works for me! 🎉

I'm following this Learn Next JS lesson.

I hope @akiran is OK...

[devXela]

Thanks @briancappello!

[znafets]

Thanks @briancappello! Works like a charm.

"dependencies": {
    "cross-env": "^5.0.1",
    "marked": "^0.3.6",
    "next": "^4.2.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-highlight": "briancappello/react-highlight#react-v16-compiled",
    "webpack-bundle-analyzer": "^2.8.3"
  }

[RahavLussato]

@mlynch try to change the require from const Highlight = require('react-highlight');
to import Highlight from 'react-highlight';

[adammenges]

Hitting this now too, trying @briancappello's patch.

[johngrimes]

Here's what I did when I encountered this error:

1. Went to https://highlightjs.org/download/ and got the minimal package of files for what I need (which was much smaller than what react-highlight was bringing in).
2. Extracted this into src/vendor/highlight.
3. Used it within my React component something like this:

import Highlight from './vendor/highlight'

class SomeComponent extends Component {
  constructor(props) {
    super(props)
    this.highlightCode = this.highlightCode.bind(this)
  }

  componentDidMount() { this.highlightCode() }
  componentDidUpdate() { this.highlightCode() }

  highlightCode() {
    if (this.code) Highlight.highlightBlock(this.code)
  }

  render() {
    return <pre className="json" ref={el => { this.code = el }}>{this.props.someCode}</pre>
  }
}

Then I just removed the dependency on react-highlight!

Anybody see any downsides to this approach? I can't see that this module is really buying me much at this point.

[Ajk4]

Thx @johngrimes for snippet, I hit this problem too and you snippet is helpful.

[mbj36]

We have published new version with React 16 support