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/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">

src/components/views/dialogs/IncomingSasDialog.tsx

@@ -256,7 +256,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
         return <VerificationCancelled onDone={this.onCancelClick} />;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let body;
         switch (this.state.phase) {
             case PHASE_START:

src/components/views/dialogs/InfoDialog.tsx

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

src/components/views/dialogs/IntegrationsDisabledDialog.tsx

@@ -35,7 +35,7 @@ export default class IntegrationsDisabledDialog extends React.Component<IProps>
         dis.fire(Action.ViewUserSettings);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_IntegrationsDisabledDialog"

src/components/views/dialogs/IntegrationsImpossibleDialog.tsx

@@ -29,7 +29,7 @@ export default class IntegrationsImpossibleDialog extends React.Component<IProps
         this.props.onFinished();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         return (

src/components/views/dialogs/InteractiveAuthDialog.tsx

@@ -140,7 +140,7 @@ export default class InteractiveAuthDialog extends React.Component<InteractiveAu
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // Let's pick a title, body, and other params text that we'll show to the user. The order
         // is most specific first, so stagePhase > our props > defaults.
 

src/components/views/dialogs/InviteDialog.tsx

@@ -100,7 +100,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
         this.props.onRemove(this.props.member);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const avatarSize = 20;
         const avatar = <SearchResultAvatar user={this.props.member} size={avatarSize} />;
 
@@ -187,7 +187,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         return result;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let timestamp = null;
         if (this.props.lastActiveTs) {
             const humanTs = humanizeTime(this.props.lastActiveTs);
@@ -1082,7 +1082,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let spinner = null;
         if (this.state.busy) {
             spinner = <Spinner w={20} h={20} />;

src/components/views/dialogs/LogoutDialog.tsx

@@ -127,7 +127,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
         this.props.onFinished(true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.shouldLoadBackupStatus) {
             const description = (
                 <div>

src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx

@@ -40,7 +40,7 @@ export default class ManualDeviceKeyVerificationDialog extends React.Component<I
         this.props.onFinished(confirm);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let text;
         if (MatrixClientPeg.get().getUserId() === this.props.userId) {
             text = _t("Confirm by comparing the following with the User Settings in your other session:");

src/components/views/dialogs/MessageEditHistoryDialog.tsx

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

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -124,7 +124,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
         this.state.messaging.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const templated = this.widget.getCompleteUrl({
             widgetRoomId: this.props.widgetRoomId,
             currentUserId: MatrixClientPeg.get().getUserId(),

src/components/views/dialogs/QuestionDialog.tsx

@@ -58,7 +58,7 @@ export default class QuestionDialog extends React.Component<IQuestionDialogProps
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let primaryButtonClass = "";
         if (this.props.danger) {
             primaryButtonClass = "danger";

src/components/views/dialogs/ReportEventDialog.tsx

@@ -273,7 +273,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         }
     };
 
-    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/RoomSettingsDialog.tsx

@@ -181,7 +181,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
         return tabs;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const roomName = this.state.roomName;
         return (
             <BaseDialog

src/components/views/dialogs/RoomUpgradeDialog.tsx

@@ -68,7 +68,7 @@ export default class RoomUpgradeDialog extends React.Component<IProps, IState> {
             });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let buttons;
         if (this.state.busy) {
             buttons = <Spinner />;

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -100,7 +100,7 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
         Modal.createDialog(BugReportDialog, {});
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         let inviteToggle = null;

src/components/views/dialogs/ScrollableBaseModal.tsx

@@ -73,7 +73,7 @@ export default abstract class ScrollableBaseModal<
     protected abstract submit(): void;
     protected abstract renderContent(): React.ReactNode;
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <MatrixClientContext.Provider value={this.matrixClient}>
                 <FocusLock

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -88,7 +88,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let timeline = this.renderTimeline().filter((c) => !!c); // remove nulls for next check
         if (timeline.length === 0) {
             timeline = [<div key={1}>{_t("You're all caught up.")}</div>];

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -163,7 +163,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
         this.props.onFinished(this.state.defaultChosen ? this.defaultServer : this.validatedConf);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let text;
         if (this.defaultServer.hsName === "matrix.org") {
             text = _t("Matrix.org is the biggest public homeserver in the world, so it's a good place for many.");

src/components/views/dialogs/SeshatResetDialog.tsx

@@ -22,7 +22,7 @@ import DialogButtons from "../elements/DialogButtons";
 import { IDialogProps } from "./IDialogProps";
 
 export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 hasCancel={true}

src/components/views/dialogs/SessionRestoreErrorDialog.tsx

@@ -54,7 +54,7 @@ export default class SessionRestoreErrorDialog extends React.Component<IProps> {
         window.location.reload();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         const clearStorageButton = (

src/components/views/dialogs/SetEmailDialog.tsx

@@ -138,7 +138,7 @@ export default class SetEmailDialog extends React.Component<IProps, IState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const emailInput = this.state.emailBusy ? (
             <Spinner />
         ) : (

src/components/views/dialogs/ShareDialog.tsx

@@ -71,14 +71,14 @@ interface IProps extends IDialogProps {
 
 interface IState {
     linkSpecificEvent: boolean;
-    permalinkCreator: RoomPermalinkCreator;
+    permalinkCreator: RoomPermalinkCreator | null;
 }
 
 export default class ShareDialog extends React.PureComponent<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
 
-        let permalinkCreator: RoomPermalinkCreator = null;
+        let permalinkCreator: RoomPermalinkCreator | null = null;
         if (props.target instanceof Room) {
             permalinkCreator = new RoomPermalinkCreator(props.target);
             permalinkCreator.load();
@@ -108,15 +108,15 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         if (this.props.target instanceof Room) {
             if (this.state.linkSpecificEvent) {
                 const events = this.props.target.getLiveTimeline().getEvents();
-                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
+                matrixToUrl = this.state.permalinkCreator!.forEvent(events[events.length - 1].getId()!);
             } else {
-                matrixToUrl = this.state.permalinkCreator.forShareableRoom();
+                matrixToUrl = this.state.permalinkCreator!.forShareableRoom();
             }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
             matrixToUrl = makeUserPermalink(this.props.target.userId);
         } else if (this.props.target instanceof MatrixEvent) {
             if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
+                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId()!);
             } else {
                 matrixToUrl = this.props.permalinkCreator.forShareableRoom();
             }
@@ -124,7 +124,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         return matrixToUrl;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let title;
         let checkbox;
 

src/components/views/dialogs/StorageEvictedDialog.tsx

@@ -37,7 +37,7 @@ export default class StorageEvictedDialog extends React.Component<IProps> {
         this.props.onFinished(true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let logRequest;
         if (SdkConfig.get().bug_report_endpoint_url) {
             logRequest = _t(

src/components/views/dialogs/TermsDialog.tsx

@@ -34,7 +34,7 @@ class TermsCheckbox extends React.PureComponent<ITermsCheckboxProps> {
         this.props.onChange(this.props.url, ev.currentTarget.checked);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <input type="checkbox" onChange={this.onChange} checked={this.props.checked} />;
     }
 }
@@ -126,7 +126,7 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const rows = [];
         for (const policiesAndService of this.props.policiesAndServicePairs) {
             const parsedBaseUrl = url.parse(policiesAndService.service.baseUrl);

src/components/views/dialogs/TextInputDialog.tsx

@@ -106,7 +106,7 @@ export default class TextInputDialog extends React.Component<IProps, IState> {
         return result;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_TextInputDialog"

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -65,7 +65,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
         this.props.onFinished(true, true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let title: string;
         if (this.props.totalFiles > 1 && this.props.currentIndex !== undefined) {
             title = _t("Upload files (%(current)s of %(total)s)", {

src/components/views/dialogs/UploadFailureDialog.tsx

@@ -43,7 +43,7 @@ export default class UploadFailureDialog extends React.Component<IProps> {
         this.props.onFinished(true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let message;
         let preview;
         let buttons;

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -210,7 +210,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
         return tabs;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_UserSettingsDialog"

src/components/views/dialogs/VerificationRequestDialog.tsx

@@ -47,7 +47,7 @@ export default class VerificationRequestDialog extends React.Component<IProps, I
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const request = this.state.verificationRequest;
         const otherUserId = request && request.otherUserId;
         const member = this.props.member || (otherUserId && MatrixClientPeg.get().getUser(otherUserId));