Conform more of the code base to strict null checking (#10147)

* Conform more of the code base to strict null checking

* More strict fixes

* More strict work

* Fix missing optional type

* Iterate

src/AsyncWrapper.tsx

@@ -74,7 +74,7 @@ export default class AsyncWrapper extends React.Component<IProps, IState> {
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.component) {
             const Component = this.state.component;
             return <Component {...this.props} />;

src/Avatar.ts

@@ -138,7 +138,7 @@ export function getInitialLetter(name: string): string | undefined {
 }
 
 export function avatarUrlForRoom(
-    room: Room,
+    room: Room | null,
     width: number,
     height: number,
     resizeMethod?: ResizeMethod,

src/HtmlUtils.tsx

@@ -204,7 +204,7 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = {
             attribs.style += "height: 100%;";
         }
 
-        attribs.src = mediaFromMxc(src).getThumbnailOfSourceHttp(width, height);
+        attribs.src = mediaFromMxc(src).getThumbnailOfSourceHttp(width, height)!;
         return { tagName, attribs };
     },
     "code": function (tagName: string, attribs: sanitizeHtml.Attributes) {
@@ -352,7 +352,7 @@ const topicSanitizeHtmlParams: IExtendedSanitizeOptions = {
 };
 
 abstract class BaseHighlighter<T extends React.ReactNode> {
-    public constructor(public highlightClass: string, public highlightLink: string) {}
+    public constructor(public highlightClass: string, public highlightLink?: string) {}
 
     /**
      * apply the highlights to a section of text
@@ -504,7 +504,7 @@ function formatEmojis(message: string, isHtmlMessage: boolean): (JSX.Element | s
 export function bodyToHtml(content: IContent, highlights: Optional<string[]>, opts: IOptsReturnString): string;
 export function bodyToHtml(content: IContent, highlights: Optional<string[]>, opts: IOptsReturnNode): ReactNode;
 export function bodyToHtml(content: IContent, highlights: Optional<string[]>, opts: IOpts = {}): ReactNode | string {
-    const isFormattedBody = content.format === "org.matrix.custom.html" && !!content.formatted_body;
+    const isFormattedBody = content.format === "org.matrix.custom.html" && typeof content.formatted_body === "string";
     let bodyHasEmoji = false;
     let isHtmlMessage = false;
 
@@ -514,7 +514,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
     }
 
     let strippedBody: string;
-    let safeBody: string; // safe, sanitised HTML, preferred over `strippedBody` which is fully plaintext
+    let safeBody: string | undefined; // safe, sanitised HTML, preferred over `strippedBody` which is fully plaintext
 
     try {
         // sanitizeHtml can hang if an unclosed HTML tag is thrown at it
@@ -529,7 +529,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
 
         if (opts.stripReplyFallback && formattedBody) formattedBody = stripHTMLReply(formattedBody);
         strippedBody = opts.stripReplyFallback ? stripPlainReply(plainBody) : plainBody;
-        bodyHasEmoji = mightContainEmoji(isFormattedBody ? formattedBody : plainBody);
+        bodyHasEmoji = mightContainEmoji(isFormattedBody ? formattedBody! : plainBody);
 
         const highlighter = safeHighlights?.length
             ? new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink)
@@ -543,11 +543,11 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
                 // by an attempt to search for 'foobar'.  Then again, the search query probably wouldn't work either
                 // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure.
                 sanitizeParams.textFilter = function (safeText) {
-                    return highlighter.applyHighlights(safeText, safeHighlights).join("");
+                    return highlighter.applyHighlights(safeText, safeHighlights!).join("");
                 };
             }
 
-            safeBody = sanitizeHtml(formattedBody, sanitizeParams);
+            safeBody = sanitizeHtml(formattedBody!, sanitizeParams);
             const phtml = cheerio.load(safeBody, {
                 // @ts-ignore: The `_useHtmlParser2` internal option is the
                 // simplest way to both parse and render using `htmlparser2`.
@@ -574,7 +574,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
                 safeBody = formatEmojis(safeBody, true).join("");
             }
         } else if (highlighter) {
-            safeBody = highlighter.applyHighlights(plainBody, safeHighlights).join("");
+            safeBody = highlighter.applyHighlights(plainBody, safeHighlights!).join("");
         }
     } finally {
         delete sanitizeParams.textFilter;
@@ -597,9 +597,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
 
         const match = BIGEMOJI_REGEX.exec(contentBodyTrimmed);
         emojiBody =
-            match &&
+            match?.[0]?.length === contentBodyTrimmed.length &&
-            match[0] &&
-            match[0].length === contentBodyTrimmed.length &&
             // Prevent user pills expanding for users with only emoji in
             // their username. Permalinks (links in pills) can be any URL
             // now, so we just check for an HTTP-looking thing.
@@ -614,7 +612,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
         "markdown-body": isHtmlMessage && !emojiBody,
     });
 
-    let emojiBodyElements: JSX.Element[];
+    let emojiBodyElements: JSX.Element[] | undefined;
     if (!safeBody && bodyHasEmoji) {
         emojiBodyElements = formatEmojis(strippedBody, false) as JSX.Element[];
     }
@@ -649,7 +647,7 @@ export function topicToHtml(
     allowExtendedHtml = false,
 ): ReactNode {
     if (!SettingsStore.getValue("feature_html_topic")) {
-        htmlTopic = null;
+        htmlTopic = undefined;
     }
 
     let isFormattedTopic = !!htmlTopic;
@@ -657,10 +655,10 @@ export function topicToHtml(
     let safeTopic = "";
 
     try {
-        topicHasEmoji = mightContainEmoji(isFormattedTopic ? htmlTopic : topic);
+        topicHasEmoji = mightContainEmoji(isFormattedTopic ? htmlTopic! : topic);
 
         if (isFormattedTopic) {
-            safeTopic = sanitizeHtml(htmlTopic, allowExtendedHtml ? sanitizeHtmlParams : topicSanitizeHtmlParams);
+            safeTopic = sanitizeHtml(htmlTopic!, allowExtendedHtml ? sanitizeHtmlParams : topicSanitizeHtmlParams);
             if (topicHasEmoji) {
                 safeTopic = formatEmojis(safeTopic, true).join("");
             }
@@ -669,7 +667,7 @@ export function topicToHtml(
         isFormattedTopic = false; // Fall back to plain-text topic
     }
 
-    let emojiBodyElements: ReturnType<typeof formatEmojis>;
+    let emojiBodyElements: ReturnType<typeof formatEmojis> | undefined;
     if (!isFormattedTopic && topicHasEmoji) {
         emojiBodyElements = formatEmojis(topic, false);
     }

src/Markdown.ts

@@ -139,7 +139,7 @@ export default class Markdown {
      */
     private repairLinks(parsed: commonmark.Node): commonmark.Node {
         const walker = parsed.walker();
-        let event: commonmark.NodeWalkingStep = null;
+        let event: commonmark.NodeWalkingStep | null = null;
         let text = "";
         let isInPara = false;
         let previousNode: commonmark.Node | null = null;
@@ -287,7 +287,7 @@ export default class Markdown {
             // However, if it's a blockquote, adds a p tag anyway
             // in order to avoid deviation to commonmark and unexpected
             // results when parsing the formatted HTML.
-            if (node.parent.type === "block_quote" || isMultiLine(node)) {
+            if (node.parent?.type === "block_quote" || isMultiLine(node)) {
                 realParagraph.call(this, node, entering);
             }
         };

src/NodeAnimator.tsx

@@ -120,7 +120,7 @@ export default class NodeAnimator extends React.Component<IProps> {
         this.nodes[k] = node;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <>{Object.values(this.children)}</>;
     }
 }

src/PosthogTrackers.ts

@@ -120,7 +120,7 @@ export class PosthogScreenTracker extends PureComponent<{ screenName: ScreenName
         PosthogTrackers.instance.clearOverride(this.props.screenName);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return null; // no need to render anything, we just need to hook into the React lifecycle
     }
 }

src/Presence.ts

@@ -33,9 +33,9 @@ enum State {
 }
 
 class Presence {
-    private unavailableTimer: Timer = null;
+    private unavailableTimer: Timer | null = null;
-    private dispatcherRef: string = null;
+    private dispatcherRef: string | null = null;
-    private state: State = null;
+    private state: State | null = null;
 
     /**
      * Start listening the user activity to evaluate his presence state.
@@ -73,14 +73,14 @@ class Presence {
      * Get the current presence state.
      * @returns {string} the presence state (see PRESENCE enum)
      */
-    public getState(): State {
+    public getState(): State | null {
         return this.state;
     }
 
     private onAction = (payload: ActionPayload): void => {
         if (payload.action === "user_activity") {
             this.setState(State.Online);
-            this.unavailableTimer.restart();
+            this.unavailableTimer?.restart();
         }
     };
 

src/Resend.ts

@@ -46,7 +46,7 @@ export default class Resend {
     }
 
     public static resend(event: MatrixEvent): Promise<void> {
-        const room = MatrixClientPeg.get().getRoom(event.getRoomId());
+        const room = MatrixClientPeg.get().getRoom(event.getRoomId())!;
         return MatrixClientPeg.get()
             .resendEvent(event, room)
             .then(

src/RoomAliasCache.ts

@@ -30,6 +30,6 @@ export function storeRoomAliasInCache(alias: string, id: string): void {
     aliasToIDMap.set(alias, id);
 }
 
-export function getCachedRoomIDForAlias(alias: string): string {
+export function getCachedRoomIDForAlias(alias: string): string | undefined {
     return aliasToIDMap.get(alias);
 }

src/RoomInvite.tsx

@@ -112,7 +112,7 @@ export function inviteUsersToRoom(
 ): Promise<void> {
     return inviteMultipleToRoom(roomId, userIds, sendSharedHistoryKeys, progressCallback)
         .then((result) => {
-            const room = MatrixClientPeg.get().getRoom(roomId);
+            const room = MatrixClientPeg.get().getRoom(roomId)!;
             showAnyInviteErrors(result.states, room, result.inviter);
         })
         .catch((err) => {
@@ -175,14 +175,14 @@ export function showAnyInviteErrors(
                                         <BaseAvatar
                                             url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(24) : null}
                                             name={name}
-                                            idName={user.userId}
+                                            idName={user?.userId}
                                             width={36}
                                             height={36}
                                         />
                                     </div>
                                     <div className="mx_InviteDialog_tile_nameStack">
                                         <span className="mx_InviteDialog_tile_nameStack_name">{name}</span>
-                                        <span className="mx_InviteDialog_tile_nameStack_userId">{user.userId}</span>
+                                        <span className="mx_InviteDialog_tile_nameStack_userId">{user?.userId}</span>
                                     </div>
                                     <div className="mx_InviteDialog_tile--inviterError_errorText">
                                         {inviter.getErrorText(addr)}

src/RoomNotifs.ts

@@ -46,7 +46,7 @@ export function getRoomNotifsState(client: MatrixClient, roomId: string): RoomNo
     }
 
     // for everything else, look at the room rule.
-    let roomRule = null;
+    let roomRule: IPushRule | undefined;
     try {
         roomRule = client.getRoomPushRule("global", roomId);
     } catch (err) {
@@ -106,7 +106,7 @@ export function getUnreadNotificationCount(room: Room, type: NotificationCountTy
 
 function setRoomNotifsStateMuted(roomId: string): Promise<any> {
     const cli = MatrixClientPeg.get();
-    const promises = [];
+    const promises: Promise<unknown>[] = [];
 
     // delete the room rule
     const roomRule = cli.getRoomPushRule("global", roomId);
@@ -137,7 +137,7 @@ function setRoomNotifsStateMuted(roomId: string): Promise<any> {
 
 function setRoomNotifsStateUnmuted(roomId: string, newState: RoomNotifState): Promise<any> {
     const cli = MatrixClientPeg.get();
-    const promises = [];
+    const promises: Promise<unknown>[] = [];
 
     const overrideMuteRule = findOverrideMuteRule(roomId);
     if (overrideMuteRule) {

src/Rooms.ts

@@ -29,13 +29,13 @@ import AliasCustomisations from "./customisations/Alias";
  * @param {Object} room The room object
  * @returns {string} A display alias for the given room
  */
-export function getDisplayAliasForRoom(room: Room): string | undefined {
+export function getDisplayAliasForRoom(room: Room): string | null {
     return getDisplayAliasForAliasSet(room.getCanonicalAlias(), room.getAltAliases());
 }
 
 // The various display alias getters should all feed through this one path so
 // there's a single place to change the logic.
-export function getDisplayAliasForAliasSet(canonicalAlias: string, altAliases: string[]): string {
+export function getDisplayAliasForAliasSet(canonicalAlias: string | null, altAliases: string[]): string | null {
     if (AliasCustomisations.getDisplayAliasForAliasSet) {
         return AliasCustomisations.getDisplayAliasForAliasSet(canonicalAlias, altAliases);
     }
@@ -45,7 +45,7 @@ export function getDisplayAliasForAliasSet(canonicalAlias: string, altAliases: s
 export function guessAndSetDMRoom(room: Room, isDirect: boolean): Promise<void> {
     let newTarget;
     if (isDirect) {
-        const guessedUserId = guessDMRoomTargetId(room, MatrixClientPeg.get().getUserId());
+        const guessedUserId = guessDMRoomTargetId(room, MatrixClientPeg.get().getUserId()!);
         newTarget = guessedUserId;
     } else {
         newTarget = null;
@@ -118,7 +118,7 @@ function guessDMRoomTargetId(room: Room, myUserId: string): string {
 
         if (oldestTs === undefined || (user.events.member && user.events.member.getTs() < oldestTs)) {
             oldestUser = user;
-            oldestTs = user.events.member.getTs();
+            oldestTs = user.events.member?.getTs();
         }
     }
     if (oldestUser) return oldestUser.userId;
@@ -129,7 +129,7 @@ function guessDMRoomTargetId(room: Room, myUserId: string): string {
 
         if (oldestTs === undefined || (user.events.member && user.events.member.getTs() < oldestTs)) {
             oldestUser = user;
-            oldestTs = user.events.member.getTs();
+            oldestTs = user.events.member?.getTs();
         }
     }
 

src/VoipUserMapper.ts

@@ -72,9 +72,9 @@ export default class VoipUserMapper {
      * Gets the ID of the virtual room for a room, or null if the room has no
      * virtual room
      */
-    public async getVirtualRoomForRoom(roomId: string): Promise<Room | null> {
+    public async getVirtualRoomForRoom(roomId: string): Promise<Room | undefined> {
         const virtualUser = await this.getVirtualUserForRoom(roomId);
-        if (!virtualUser) return null;
+        if (!virtualUser) return undefined;
 
         return findDMForUser(MatrixClientPeg.get(), virtualUser);
     }
@@ -145,7 +145,6 @@ export default class VoipUserMapper {
                 // (possibly we should only join if we've also joined the native room, then we'd also have
                 // to make sure we joined virtual rooms on joining a native one)
                 MatrixClientPeg.get().joinRoom(invitedRoom.roomId);
-            }
 
                 // also put this room in the virtual room ID cache so isVirtualRoom return the right answer
                 // in however long it takes for the echo of setAccountData to come down the sync
@@ -153,3 +152,4 @@ export default class VoipUserMapper {
             }
         }
     }
+}

src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx

@@ -143,7 +143,7 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
         SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         let crawlerState;

src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx

@@ -459,7 +459,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let content;
         if (this.state.error) {
             content = (

src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx

@@ -842,7 +842,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let content;
         if (this.state.error) {
             content = (

src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx

@@ -127,7 +127,7 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
         } as Pick<IState, AnyPassphrase>);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const disableForm = this.state.phase === Phase.Exporting;
 
         return (

src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx

@@ -127,7 +127,7 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
         return false;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const disableForm = this.state.phase !== Phase.Edit;
 
         return (

src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx

@@ -48,13 +48,13 @@ export default class NewRecoveryMethodDialog extends React.PureComponent<IProps>
             {
                 onFinished: this.props.onFinished,
             },
-            null,
+            undefined,
             /* priority = */ false,
             /* static = */ true,
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const title = <span className="mx_KeyBackupFailedDialog_title">{_t("New Recovery Method")}</span>;
 
         const newMethodDetected = <p>{_t("A new Security Phrase and key for Secure Messages have been detected.")}</p>;

src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx

@@ -37,14 +37,14 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent<IPr
         this.props.onFinished();
         Modal.createDialogAsync(
             import("./CreateKeyBackupDialog") as unknown as Promise<ComponentType<{}>>,
-            null,
+            undefined,
             null,
             /* priority = */ false,
             /* static = */ true,
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const title = <span className="mx_KeyBackupFailedDialog_title">{_t("Recovery Method Removed")}</span>;
 
         return (

src/audio/PlaybackQueue.ts

@@ -91,7 +91,7 @@ export class PlaybackQueue {
 
     public unsortedEnqueue(mxEvent: MatrixEvent, playback: Playback): void {
         // We don't ever detach our listeners: we expect the Playback to clean up for us
-        this.playbacks.set(mxEvent.getId(), playback);
+        this.playbacks.set(mxEvent.getId()!, playback);
         playback.on(UPDATE_EVENT, (state) => this.onPlaybackStateChange(playback, mxEvent, state));
         playback.clockInfo.liveData.onUpdate((clock) => this.onPlaybackClock(playback, mxEvent, clock));
     }
@@ -99,12 +99,12 @@ export class PlaybackQueue {
     private onPlaybackStateChange(playback: Playback, mxEvent: MatrixEvent, newState: PlaybackState): void {
         // Remember where the user got to in playback
         const wasLastPlaying = this.currentPlaybackId === mxEvent.getId();
-        if (newState === PlaybackState.Stopped && this.clockStates.has(mxEvent.getId()) && !wasLastPlaying) {
+        if (newState === PlaybackState.Stopped && this.clockStates.has(mxEvent.getId()!) && !wasLastPlaying) {
             // noinspection JSIgnoredPromiseFromCall
-            playback.skipTo(this.clockStates.get(mxEvent.getId())!);
+            playback.skipTo(this.clockStates.get(mxEvent.getId()!)!);
         } else if (newState === PlaybackState.Stopped) {
             // Remove the now-useless clock for some space savings
-            this.clockStates.delete(mxEvent.getId());
+            this.clockStates.delete(mxEvent.getId()!);
 
             if (wasLastPlaying) {
                 this.recentFullPlays.add(this.currentPlaybackId);
@@ -133,7 +133,7 @@ export class PlaybackQueue {
                         // timeline is already most recent last, so we can iterate down that.
                         const timeline = arrayFastClone(this.room.getLiveTimeline().getEvents());
                         let scanForVoiceMessage = false;
-                        let nextEv: MatrixEvent;
+                        let nextEv: MatrixEvent | undefined;
                         for (const event of timeline) {
                             if (event.getId() === mxEvent.getId()) {
                                 scanForVoiceMessage = true;
@@ -149,8 +149,8 @@ export class PlaybackQueue {
                                 break; // Stop automatic playback: next useful event is not a voice message
                             }
 
-                            const havePlayback = this.playbacks.has(event.getId());
+                            const havePlayback = this.playbacks.has(event.getId()!);
-                            const isRecentlyCompleted = this.recentFullPlays.has(event.getId());
+                            const isRecentlyCompleted = this.recentFullPlays.has(event.getId()!);
                             if (havePlayback && !isRecentlyCompleted) {
                                 nextEv = event;
                                 break;
@@ -164,7 +164,7 @@ export class PlaybackQueue {
                         } else {
                             this.playbackIdOrder = orderClone;
 
-                            const instance = this.playbacks.get(nextEv.getId());
+                            const instance = this.playbacks.get(nextEv.getId()!);
                             PlaybackManager.instance.pauseAllExcept(instance);
 
                             // This should cause a Play event, which will re-populate our playback order
@@ -196,7 +196,7 @@ export class PlaybackQueue {
                 }
             }
 
-            this.currentPlaybackId = mxEvent.getId();
+            this.currentPlaybackId = mxEvent.getId()!;
             if (order.length === 0 || order[order.length - 1] !== this.currentPlaybackId) {
                 order.push(this.currentPlaybackId);
             }
@@ -214,7 +214,7 @@ export class PlaybackQueue {
         if (playback.currentState === PlaybackState.Decoding) return; // ignore pre-ready values
 
         if (playback.currentState !== PlaybackState.Stopped) {
-            this.clockStates.set(mxEvent.getId(), clocks[0]); // [0] is the current seek position
+            this.clockStates.set(mxEvent.getId()!, clocks[0]); // [0] is the current seek position
         }
     }
 }

src/audio/VoiceRecording.ts

@@ -77,7 +77,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
     private targetMaxLength: number | null = TARGET_MAX_LENGTH;
     public amplitudes: number[] = []; // at each second mark, generated
     private liveWaveform = new FixedRollingArray(RECORDING_PLAYBACK_SAMPLES, 0);
-    public onDataAvailable: (data: ArrayBuffer) => void;
+    public onDataAvailable?: (data: ArrayBuffer) => void;
 
     public get contentType(): string {
         return "audio/ogg";
@@ -181,7 +181,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
             });
 
             // not using EventEmitter here because it leads to detached bufferes
-            this.recorder.ondataavailable = (data: ArrayBuffer) => this?.onDataAvailable(data);
+            this.recorder.ondataavailable = (data: ArrayBuffer) => this.onDataAvailable?.(data);
         } catch (e) {
             logger.error("Error starting recording: ", e);
             if (e instanceof DOMException) {

src/autocomplete/AutocompleteProvider.tsx

@@ -70,7 +70,7 @@ export default abstract class AutocompleteProvider {
      * @param {boolean} force True if the user is forcing completion
      * @return {object} { command, range } where both objects fields are null if no match
      */
-    public getCurrentCommand(query: string, selection: ISelectionRange, force = false): ICommand | null {
+    public getCurrentCommand(query: string, selection: ISelectionRange, force = false): Partial<ICommand> {
         let commandRegex = this.commandRegex;
 
         if (force && this.shouldForceComplete()) {
@@ -78,7 +78,7 @@ export default abstract class AutocompleteProvider {
         }
 
         if (!commandRegex) {
-            return null;
+            return {};
         }
 
         commandRegex.lastIndex = 0;

src/autocomplete/CommandProvider.tsx

@@ -95,7 +95,7 @@ export default class CommandProvider extends AutocompleteProvider {
                             description={_t(result.description)}
                         />
                     ),
-                    range,
+                    range: range!,
                 };
             });
     }

src/autocomplete/EmojiProvider.tsx

@@ -94,7 +94,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             shouldMatchWordsOnly: true,
         });
 
-        this.recentlyUsed = Array.from(new Set(recent.get().map(getEmojiFromUnicode).filter(Boolean)));
+        this.recentlyUsed = Array.from(new Set(recent.get().map(getEmojiFromUnicode).filter(Boolean))) as IEmoji[];
     }
 
     public async getCompletions(
@@ -152,7 +152,7 @@ export default class EmojiProvider extends AutocompleteProvider {
                         <span>{c.emoji.unicode}</span>
                     </PillCompletion>
                 ),
-                range,
+                range: range!,
             }));
         }
         return [];

src/autocomplete/NotifProvider.tsx

@@ -40,12 +40,13 @@ export default class NotifProvider extends AutocompleteProvider {
     ): Promise<ICompletion[]> {
         const client = MatrixClientPeg.get();
 
-        if (!this.room.currentState.mayTriggerNotifOfType("room", client.credentials.userId)) return [];
+        if (!this.room.currentState.mayTriggerNotifOfType("room", client.credentials.userId!)) return [];
 
         const { command, range } = this.getCurrentCommand(query, selection, force);
         if (
-            command?.[0].length > 1 &&
+            command?.[0] &&
-            ["@room", "@channel", "@everyone", "@here"].some((c) => c.startsWith(command[0]))
+            command[0].length > 1 &&
+            ["@room", "@channel", "@everyone", "@here"].some((c) => c.startsWith(command![0]))
         ) {
             return [
                 {
@@ -58,7 +59,7 @@ export default class NotifProvider extends AutocompleteProvider {
                             <RoomAvatar width={24} height={24} room={this.room} />
                         </PillCompletion>
                     ),
-                    range,
+                    range: range!,
                 },
             ];
         }

src/autocomplete/QueryMatcher.ts

@@ -88,7 +88,7 @@ export default class QueryMatcher<T extends {}> {
                 if (!this._items.has(key)) {
                     this._items.set(key, []);
                 }
-                this._items.get(key).push({
+                this._items.get(key)!.push({
                     keyWeight: Number(index),
                     object,
                 });
@@ -104,7 +104,11 @@ export default class QueryMatcher<T extends {}> {
         if (query.length === 0) {
             return [];
         }
-        const matches = [];
+        const matches: {
+            index: number;
+            object: T;
+            keyWeight: number;
+        }[] = [];
         // Iterate through the map & check each key.
         // ES6 Map iteration order is defined to be insertion order, so results
         // here will come out in the order they were put in.

src/autocomplete/RoomProvider.tsx

@@ -39,12 +39,12 @@ function canonicalScore(displayedAlias: string, room: Room): number {
 
 function matcherObject(
     room: Room,
-    displayedAlias: string | null,
+    displayedAlias: string,
     matchName = "",
 ): {
     room: Room;
     matchName: string;
-    displayedAlias: string | null;
+    displayedAlias: string;
 } {
     return {
         room,
@@ -81,7 +81,7 @@ export default class RoomProvider extends AutocompleteProvider {
             // the only reason we need to do this is because Fuse only matches on properties
             let matcherObjects = this.getRooms().reduce<ReturnType<typeof matcherObject>[]>((aliases, room) => {
                 if (room.getCanonicalAlias()) {
-                    aliases = aliases.concat(matcherObject(room, room.getCanonicalAlias(), room.name));
+                    aliases = aliases.concat(matcherObject(room, room.getCanonicalAlias()!, room.name));
                 }
                 if (room.getAltAliases().length) {
                     const altAliases = room.getAltAliases().map((alias) => matcherObject(room, alias));
@@ -122,7 +122,7 @@ export default class RoomProvider extends AutocompleteProvider {
                                 <RoomAvatar width={24} height={24} room={room.room} />
                             </PillCompletion>
                         ),
-                        range,
+                        range: range!,
                     }),
                 )
                 .filter((completion) => !!completion.completion && completion.completion.length > 0);

src/autocomplete/UserProvider.tsx

@@ -44,7 +44,7 @@ const FORCED_USER_REGEX = /[^/,:; \t\n]\S*/g;
 
 export default class UserProvider extends AutocompleteProvider {
     public matcher: QueryMatcher<RoomMember>;
-    public users: RoomMember[];
+    public users: RoomMember[] | null;
     public room: Room;
 
     public constructor(room: Room, renderingType?: TimelineRenderingType) {
@@ -54,7 +54,7 @@ export default class UserProvider extends AutocompleteProvider {
             renderingType,
         });
         this.room = room;
-        this.matcher = new QueryMatcher([], {
+        this.matcher = new QueryMatcher<RoomMember>([], {
             keys: ["name"],
             funcs: [(obj) => obj.userId.slice(1)], // index by user id minus the leading '@'
             shouldMatchWordsOnly: false,
@@ -73,7 +73,7 @@ export default class UserProvider extends AutocompleteProvider {
 
     private onRoomTimeline = (
         ev: MatrixEvent,
-        room: Room | null,
+        room: Room | undefined,
         toStartOfTimeline: boolean,
         removed: boolean,
         data: IRoomTimelineData,
@@ -118,7 +118,7 @@ export default class UserProvider extends AutocompleteProvider {
             // Don't include the '@' in our search query - it's only used as a way to trigger completion
             const query = fullMatch.startsWith("@") ? fullMatch.substring(1) : fullMatch;
             return this.matcher.match(query, limit).map((user) => {
-                const description = UserIdentifierCustomisations.getDisplayUserIdentifier(user.userId, {
+                const description = UserIdentifierCustomisations.getDisplayUserIdentifier?.(user.userId, {
                     roomId: this.room.roomId,
                     withDisplayName: true,
                 });
@@ -129,14 +129,14 @@ export default class UserProvider extends AutocompleteProvider {
                     completion: user.rawDisplayName,
                     completionId: user.userId,
                     type: "user",
-                    suffix: selection.beginning && range.start === 0 ? ": " : " ",
+                    suffix: selection.beginning && range!.start === 0 ? ": " : " ",
                     href: makeUserPermalink(user.userId),
                     component: (
                         <PillCompletion title={displayName} description={description}>
                             <MemberAvatar member={user} width={24} height={24} />
                         </PillCompletion>
                     ),
-                    range,
+                    range: range!,
                 };
             });
         }
@@ -152,7 +152,7 @@ export default class UserProvider extends AutocompleteProvider {
         const lastSpoken: Record<string, number> = {};
 
         for (const event of events) {
-            lastSpoken[event.getSender()] = event.getTs();
+            lastSpoken[event.getSender()!] = event.getTs();
         }
 
         const currentUserId = MatrixClientPeg.get().credentials.userId;
@@ -164,7 +164,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.matcher.setObjects(this.users);
     }
 
-    public onUserSpoke(user: RoomMember): void {
+    public onUserSpoke(user: RoomMember | null): void {
         if (!this.users) return;
         if (!user) return;
         if (user.userId === MatrixClientPeg.get().credentials.userId) return;

src/components/structures/AutoHideScrollbar.tsx

@@ -55,7 +55,7 @@ export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> ex
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { element, className, onScroll, tabIndex, wrappedRef, children, ...otherProps } = this.props;
 

src/components/structures/EmbeddedPage.tsx

@@ -118,7 +118,7 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // HACK: Workaround for the context's MatrixClient not updating.
         const client = this.context || MatrixClientPeg.get();
         const isGuest = client ? client.isGuest() : true;

src/components/structures/FilePanel.tsx

@@ -223,7 +223,7 @@ class FilePanel extends React.Component<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (MatrixClientPeg.get().isGuest()) {
             return (
                 <BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>

src/components/structures/GenericErrorPage.tsx

@@ -22,7 +22,7 @@ interface IProps {
 }
 
 export default class GenericErrorPage extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_GenericErrorPage">
                 <div className="mx_GenericErrorPage_box">

src/components/structures/IndicatorScrollbar.tsx

@@ -177,7 +177,7 @@ export default class IndicatorScrollbar<T extends keyof JSX.IntrinsicElements> e
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props;
 

src/components/structures/InteractiveAuth.tsx

@@ -249,7 +249,7 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
         this.authLogic.setEmailSid(sid);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const stage = this.state.authStage;
         if (!stage) {
             if (this.state.busy) {

src/components/structures/LoggedInView.tsx

@@ -619,7 +619,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._roomView.current?.handleScrollKey(ev);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let pageElement;
 
         switch (this.props.page_type) {

src/components/structures/MainSplit.tsx

@@ -47,7 +47,7 @@ export default class MainSplit extends React.Component<IProps> {
     };
 
     private loadSidePanelSize(): { height: string | number; width: number } {
-        let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size"), 10);
+        let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size")!, 10);
 
         if (isNaN(rhsSize)) {
             rhsSize = 350;
@@ -59,7 +59,7 @@ export default class MainSplit extends React.Component<IProps> {
         };
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const bodyView = React.Children.only(this.props.children);
         const panelView = this.props.panel;
 

src/components/structures/MatrixChat.tsx

@@ -2021,7 +2021,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         return fragmentAfterLogin;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const fragmentAfterLogin = this.getFragmentAfterLogin();
         let view = null;
 

src/components/structures/MessagePanel.tsx

@@ -982,7 +982,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let topSpinner;
         let bottomSpinner;
         if (this.props.backPaginating) {

src/components/structures/NonUrgentToastContainer.tsx

@@ -45,7 +45,7 @@ export default class NonUrgentToastContainer extends React.PureComponent<IProps,
         this.setState({ toasts: NonUrgentToastStore.instance.components });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const toasts = this.state.toasts.map((t, i) => {
             return (
                 <div className="mx_NonUrgentToastContainer_toast" key={`toast-${i}`}>

src/components/structures/NotificationPanel.tsx

@@ -55,7 +55,7 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
         this.setState({ narrow });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const emptyState = (
             <div className="mx_RightPanel_empty mx_NotificationPanel_empty">
                 <h2>{_t("You're all caught up")}</h2>

src/components/structures/PictureInPictureDragger.tsx

@@ -245,7 +245,7 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const style = {
             transform: `translateX(${this.translationX}px) translateY(${this.translationY}px)`,
         };

src/components/structures/PipContainer.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MutableRefObject, useContext, useRef } from "react";
+import React, { MutableRefObject, ReactNode, useContext, useRef } from "react";
 import { CallEvent, CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Optional } from "matrix-events-sdk";
@@ -288,7 +288,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): ReactNode {
         const pipMode = true;
         let pipContent: Array<CreatePipChildren> = [];
 

src/components/structures/RightPanel.tsx

@@ -149,7 +149,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
         this.setState({ searchQuery });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let card = <div />;
         const roomId = this.props.room?.roomId;
         const phase = this.props.overwriteCard?.phase ?? this.state.phase;

src/components/structures/RoomSearchView.tsx

@@ -111,11 +111,11 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
                                             );
                                         if (!bundledRelationship || event.getThread()) continue;
                                         const room = client.getRoom(event.getRoomId());
-                                        const thread = room.findThreadForEvent(event);
+                                        const thread = room?.findThreadForEvent(event);
                                         if (thread) {
                                             event.setThread(thread);
                                         } else {
-                                            room.createThread(event.getId(), event, [], true);
+                                            room?.createThread(event.getId()!, event, [], true);
                                         }
                                     }
                                 }
@@ -214,7 +214,7 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
             scrollPanel?.checkScroll();
         };
 
-        let lastRoomId: string;
+        let lastRoomId: string | undefined;
         let mergedTimeline: MatrixEvent[] = [];
         let ourEventsIndexes: number[] = [];
 

src/components/structures/RoomStatusBar.tsx

@@ -213,7 +213,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
                 {},
                 {
                     consentLink: (sub) => (
-                        <a href={consentError.data && consentError.data.consent_uri} target="_blank">
+                        <a href={consentError!.data?.consent_uri} target="_blank">
                             {sub}
                         </a>
                     ),
@@ -272,7 +272,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.shouldShowConnectionError()) {
             return (
                 <div className="mx_RoomStatusBar">

src/components/structures/RoomView.tsx

@@ -1879,7 +1879,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.room instanceof LocalRoom) {
             if (this.state.room.state === LocalRoomState.CREATING) {
                 return this.renderLocalRoomCreateLoader();

src/components/structures/SearchBox.tsx

@@ -24,7 +24,7 @@ import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 
 interface IProps extends HTMLProps<HTMLInputElement> {
-    onSearch?: (query: string) => void;
+    onSearch: (query: string) => void;
     onCleared?: (source?: string) => void;
     onKeyDown?: (ev: React.KeyboardEvent) => void;
     onFocus?: (ev: React.FocusEvent) => void;
@@ -62,7 +62,7 @@ export default class SearchBox extends React.Component<IProps, IState> {
 
     private onSearch = throttle(
         (): void => {
-            this.props.onSearch(this.search.current.value);
+            this.props.onSearch(this.search.current?.value);
         },
         200,
         { trailing: true, leading: true },
@@ -101,7 +101,7 @@ export default class SearchBox extends React.Component<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const {
             onSearch,

src/components/structures/SpaceRoomView.tsx

@@ -814,7 +814,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const rightPanel =
             this.state.showRightPanel && this.state.phase === Phase.Landing ? (
                 <RightPanel room={this.props.space} resizeNotifier={this.props.resizeNotifier} />

src/components/structures/ThreadView.tsx

@@ -343,7 +343,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const highlightedEventId = this.props.isInitialEventHighlighted ? this.props.initialEvent?.getId() : null;
 
         const threadRelation = this.threadRelation;

src/components/structures/TimelinePanel.tsx

@@ -1886,7 +1886,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         this.callEventGroupers = buildLegacyCallEventGroupers(this.callEventGroupers, events);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // just show a spinner while the timeline loads.
         //
         // put it in a div of the right class (mx_RoomView_messagePanel) so

src/components/structures/ToastContainer.tsx

@@ -50,7 +50,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const totalCount = this.state.toasts.length;
         const isStacked = totalCount > 1;
         let toast;

src/components/structures/UploadBar.tsx

@@ -103,7 +103,7 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
         ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload!);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (!this.state.currentFile) {
             return null;
         }

src/components/structures/UserMenu.tsx

@@ -429,7 +429,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const avatarSize = 32; // should match border-radius of the avatar
 
         const userId = MatrixClientPeg.get().getUserId();

src/components/structures/UserView.tsx

@@ -18,6 +18,7 @@ limitations under the License.
 import React from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import Modal from "../../Modal";
@@ -31,7 +32,7 @@ import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases
 import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage";
 
 interface IProps {
-    userId?: string;
+    userId: string;
     resizeNotifier: ResizeNotifier;
 }
 
@@ -66,7 +67,7 @@ export default class UserView extends React.Component<IProps, IState> {
     private async loadProfileInfo(): Promise<void> {
         const cli = MatrixClientPeg.get();
         this.setState({ loading: true });
-        let profileInfo;
+        let profileInfo: Awaited<ReturnType<MatrixClient["getProfileInfo"]>>;
         try {
             profileInfo = await cli.getProfileInfo(this.props.userId);
         } catch (err) {
@@ -83,7 +84,7 @@ export default class UserView extends React.Component<IProps, IState> {
         this.setState({ member, loading: false });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.loading) {
             return <Spinner />;
         } else if (this.state.member) {

src/components/structures/ViewSource.tsx

@@ -142,7 +142,7 @@ export default class ViewSource extends React.Component<IProps, IState> {
         return room.currentState.mayClientSendStateEvent(mxEvent.getType(), cli);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
 
         const isEditing = this.state.isEditing;

src/components/structures/auth/CompleteSecurity.tsx

@@ -57,7 +57,7 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
         store.stop();
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { phase, lostKeys } = this.state;
         let icon;
         let title;

src/components/structures/auth/E2eSetup.tsx

@@ -27,7 +27,7 @@ interface IProps {
 }
 
 export default class E2eSetup extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <AuthPage>
                 <CompleteSecurityBody>

src/components/structures/auth/ForgotPassword.tsx

@@ -487,7 +487,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let resetPasswordJsx: JSX.Element;
 
         switch (this.state.phase) {

src/components/structures/auth/Login.tsx

@@ -563,7 +563,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const loader =
             this.isBusy() && !this.state.busyLoggingIn ? (
                 <div className="mx_Login_loader">

src/components/structures/auth/Registration.tsx

@@ -573,7 +573,7 @@ export default class Registration extends React.Component<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let errorText;
         const err = this.state.errorText;
         if (err) {

src/components/structures/auth/SetupEncryptionBody.tsx

@@ -141,7 +141,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         this.props.onFinished();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { phase, lostKeys } = this.state;
 
         if (this.state.verificationRequest) {

src/components/structures/auth/SoftLogout.tsx

@@ -326,7 +326,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <AuthPage>
                 <AuthHeader />

src/components/views/audio_messages/Clock.tsx

@@ -43,7 +43,7 @@ export default class Clock extends React.Component<Props> {
         return currentFloor !== nextFloor;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <span aria-live={this.props["aria-live"]} role={this.props.role} className="mx_Clock">
                 {this.props.formatFn(this.props.seconds)}

src/components/views/audio_messages/DurationClock.tsx

@@ -48,7 +48,7 @@ export default class DurationClock extends React.PureComponent<IProps, IState> {
         this.setState({ durationSeconds: time[1] });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Clock seconds={this.state.durationSeconds} />;
     }
 }

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -59,7 +59,7 @@ export default class LiveRecordingClock extends React.PureComponent<IProps, ISta
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Clock seconds={this.state.seconds} aria-live="off" />;
     }
 }

src/components/views/audio_messages/LiveRecordingWaveform.tsx

@@ -63,7 +63,7 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
         this.setState({ waveform: this.waveform });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Waveform relHeights={this.state.waveform} />;
     }
 }

src/components/views/audio_messages/PlaybackClock.tsx

@@ -65,7 +65,7 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
         this.setState({ seconds: time[0], durationSeconds: time[1] });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let seconds = this.state.seconds;
         if (this.state.playbackPhase === PlaybackState.Stopped) {
             if (Number.isFinite(this.props.defaultDisplaySeconds)) {

src/components/views/audio_messages/PlaybackWaveform.tsx

@@ -61,7 +61,7 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
         this.setState({ progress });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Waveform relHeights={this.state.heights} progress={this.state.progress} />;
     }
 }

src/components/views/audio_messages/Waveform.tsx

@@ -41,7 +41,7 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
         progress: 1,
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_Waveform">
                 {this.props.relHeights.map((h, i) => {

src/components/views/auth/CaptchaForm.tsx

@@ -122,7 +122,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let error = null;
         if (this.state.errorText) {
             error = <div className="error">{this.state.errorText}</div>;

src/components/views/auth/EmailField.tsx

@@ -74,7 +74,7 @@ class EmailField extends PureComponent<IProps> {
         return result;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -136,7 +136,7 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const passwordBoxClass = classNames({
             error: this.props.errorText,
         });
@@ -207,7 +207,7 @@ export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.props.busy) {
             return <Spinner />;
         }
@@ -353,7 +353,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.props.busy) {
             return <Spinner />;
         }
@@ -442,7 +442,7 @@ export class EmailIdentityAuthEntry extends React.Component<
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let errorSection;
         // ignore the error when errcode is M_UNAUTHORIZED as we expect that error until the link is clicked.
         if (this.props.errorText && this.props.errorCode !== "M_UNAUTHORIZED") {
@@ -650,7 +650,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.requestingToken) {
             return <Spinner />;
         } else {
@@ -733,7 +733,7 @@ export class RegistrationTokenAuthEntry extends React.Component<IAuthEntryProps,
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const registrationTokenBoxClass = classNames({
             error: this.props.errorText,
         });
@@ -857,7 +857,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         this.props.submitAuthDict({});
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let continueButton = null;
         const cancelButton = (
             <AccessibleButton
@@ -952,7 +952,7 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let errorSection;
         if (this.props.errorText) {
             errorSection = (

src/components/views/auth/LoginWithQR.tsx

@@ -229,7 +229,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <LoginWithQRFlow
                 onClick={this.onClick}

src/components/views/auth/LoginWithQRFlow.tsx

@@ -69,7 +69,7 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let title = "";
         let titleIcon: JSX.Element | undefined;
         let main: JSX.Element | undefined;

src/components/views/auth/PassphraseConfirmField.tsx

@@ -65,7 +65,7 @@ class PassphraseConfirmField extends PureComponent<IProps> {
         return result;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/PassphraseField.tsx

@@ -102,7 +102,7 @@ class PassphraseField extends PureComponent<IProps> {
         return result;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/PasswordLogin.tsx

@@ -367,7 +367,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {

src/components/views/auth/RegistrationForm.tsx

@@ -534,7 +534,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} disabled={!this.props.canSubmit} />
         );

src/components/views/avatars/MemberAvatar.tsx

@@ -109,7 +109,7 @@ export default function MemberAvatar({
 }
 
 export class LegacyMemberAvatar extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <MemberAvatar {...this.props}>{this.props.children}</MemberAvatar>;
     }
 }

src/components/views/avatars/RoomAvatar.tsx

@@ -135,7 +135,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         return this.props.room?.roomId || this.props.oobData?.roomId;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
         const roomName = room?.name ?? oobData.name;
 

src/components/views/beta/BetaCard.tsx

@@ -91,7 +91,7 @@ const BetaCard: React.FC<IProps> = ({ title: titleOverride, featureId }) => {
         );
     }
 
-    let refreshWarning: string;
+    let refreshWarning: string | undefined;
     if (requiresRefresh) {
         const brand = SdkConfig.get().brand;
         refreshWarning = value

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -69,7 +69,7 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         this.setState({ value: ev.target.value });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <ContextMenu {...this.props}>
                 <div className="mx_DialPadContextMenuWrapper">

src/components/views/context_menus/GenericElementContextMenu.tsx

@@ -47,7 +47,7 @@ export default class GenericElementContextMenu extends React.Component<IProps> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <div>{this.props.element}</div>;
     }
 }

src/components/views/context_menus/GenericTextContextMenu.tsx

@@ -21,7 +21,7 @@ interface IProps {
 }
 
 export default class GenericTextContextMenu extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_Tooltip mx_Tooltip_visible" style={{ display: "block" }}>
                 {this.props.message}

src/components/views/context_menus/LegacyCallContextMenu.tsx

@@ -46,7 +46,7 @@ export default class LegacyCallContextMenu extends React.Component<IProps> {
         this.props.onFinished();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const holdUnholdCaption = this.props.call.isRemoteOnHold() ? _t("Resume") : _t("Hold");
         const handler = this.props.call.isRemoteOnHold() ? this.onUnholdClick : this.onHoldClick;
 

src/components/views/context_menus/MessageContextMenu.tsx

@@ -376,7 +376,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         this.closeMenu();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const cli = MatrixClientPeg.get();
         const me = cli.getUserId();
         const { mxEvent, rightClick, link, eventTileOps, reactions, collapseReplyChain, ...other } = this.props;

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -48,7 +48,7 @@ export default class AskInviteAnywayDialog extends React.Component<IProps> {
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const errorList = this.props.unknownProfileUsers.map((address) => (
             <li key={address.userId}>
                 {address.userId}: {address.errorText}

src/components/views/dialogs/BaseDialog.tsx

@@ -115,7 +115,7 @@ export default class BaseDialog extends React.Component<IProps> {
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = (

src/components/views/dialogs/BugReportDialog.tsx

@@ -180,7 +180,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
         this.setState({ downloadProgress });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let error = null;
         if (this.state.err) {
             error = <div className="error">{this.state.err}</div>;

src/components/views/dialogs/ChangelogDialog.tsx

@@ -86,7 +86,7 @@ export default class ChangelogDialog extends React.Component<IProps, State> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const logs = REPOS.map((repo) => {
             let content;
             if (this.state[repo] == null) {

src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx

@@ -72,7 +72,7 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IPro
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.isRedacting) {
             if (this.state.redactionErrorCode) {
                 const code = this.state.redactionErrorCode;

src/components/views/dialogs/ConfirmRedactDialog.tsx

@@ -33,7 +33,7 @@ interface IProps {
  * A dialog for confirming a redaction.
  */
 export default class ConfirmRedactDialog extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <TextInputDialog
                 onFinished={this.props.onFinished}

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -83,7 +83,7 @@ export default class ConfirmUserActionDialog extends React.Component<IProps, ISt
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const confirmButtonClass = this.props.danger ? "danger" : "";
 
         let reasonBox;

src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx

@@ -33,7 +33,7 @@ export default class ConfirmWipeDeviceDialog extends React.Component<IProps> {
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_ConfirmWipeDeviceDialog"

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -216,7 +216,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         ],
     });
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const isVideoRoom = this.props.type === RoomType.ElementVideo;
 
         let aliasField: JSX.Element;

src/components/views/dialogs/DeactivateAccountDialog.tsx

@@ -182,7 +182,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">{this.state.errStr}</div>;

src/components/views/dialogs/EndPollDialog.tsx

@@ -67,7 +67,7 @@ export default class EndPollDialog extends React.Component<IProps> {
         this.props.onFinished(endPoll);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <QuestionDialog
                 title={_t("End Poll")}

src/components/views/dialogs/ErrorDialog.tsx

@@ -52,7 +52,7 @@ export default class ErrorDialog extends React.Component<IProps, IState> {
         this.props.onFinished(true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_ErrorDialog"

src/components/views/dialogs/FeedbackDialog.tsx

@@ -97,7 +97,7 @@ const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
         );
     }
 
-    let bugReports = null;
+    let bugReports: JSX.Element | null = null;
     if (rageshakeUrl) {
         bugReports = (
             <p className="mx_FeedbackDialog_section_microcopy">