getApplicationNode() does not compile (when using TypeScript strictNullChecks option)

[Ola Imerslund]

The Problem

When using react-aria-modal in combination with TypeScript compiler option strictNullChecks, the solution does not compile.

The compile complains with the following message:

TS2322: Type '() => HTMLElement | null' is not assignable to type '() => Element | Node'.
  Type 'HTMLElement | null' is not assignable to type 'Element | Node'.
    Type 'null' is not assignable to type 'Element | Node'.

Solution

Changing getApplicationNode?(): Node | Element; to getApplicationNode?(): Element | null; in the file @types\react-aria-modal\index.d.ts seems to fix the problem.

Background

In @types\react-aria-modal\index.d.ts the getApplicationNode?() return type is defined as Node | Element. This is not correct according to MDN's getElementById documentation, which states:

An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

This error occurs when using react-aria-modal: 3.1.0, @types/react-aria-modal: 2.12.1, and typescript: 3.3.3333.

[Ola Imerslund]

A workaround for this problem is to assert the type of the value returned from getApplicationNode in the component:

    getApplicationNode = () => {
        return document.getElementById("root") as Element;
    };