Fix Flow Node Issue “property querySelector of unknown”

By  on  
JavaScript Flow React

Flow, the static type checker used in many React projects, feels like a gift and a curse at times; a gift in that it identifies weaknesses in your code, and a curse that sometimes you feel like you're needlessly adjusting your code to satisfy Flow.  I've grown to appreciate Flow but that doesn't mean I end up spending extra hours finding new ways to code.

I recently ran into an issue where I was querying for a node in a React element and then using querySelector on that node to find a child; surprisingly Flow took issue:

Cannot call node.querySelector because property querySelector of unknown
type [1] is not a function.

71│ const { maxHeight } = this.state;
72│ const node = ReactDOM.findDOMNode(this);
[1] 73│ if (node && node.querySelector) {
74│ const popupNode = node.querySelector(".preview-popup");
75│ if (popupNode) {
76│ popupNode.style.maxHeight = `${maxHeight}px`;
77│ }

/private/tmp/flow/flowlib_34a4c903/react-dom.js
[1] 14│ ): null | Element | Text;

Found 1 error

It turns out that findDOMNode can return type Text, and thus querySelectorAll would be undefined;  Flow doesn't like undefined.  The solution is to use instanceOf  with HTMLElement:

if (node instanceOf HTMLElement) {
    // ...
}

The solution makes sense but a part of me silently rages that && node.querySelector doesn't qualify.  In the end, Flow is so helpful that little changes like this don't get me too wound up.

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

  • By
    iPhone Click Effect Using MooTools or jQuery

    One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!