fix(types): four-oh-four props, global i18next definition for returnNull (#50809)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/i18n/config-for-tests.ts

@@ -12,7 +12,8 @@ i18n
     },
     lng: 'en',
     ns: ['translations'],
-    resources: { en: { translations: {} } }
+    resources: { en: { translations: {} } },
+    returnNull: false
   })
   .catch((error: Error) => {
     throw Error(error.message);

client/i18n/config.js

@@ -73,7 +73,8 @@ i18n.use(initReactI18next).init({
   },
   react: {
     useSuspense: true
-  }
+  },
+  returnNull: false
 });
 
 i18n.languages = clientLocale;

client/src/components/FourOhFour/index.tsx

@@ -1,3 +1,4 @@
+import { RouteComponentProps } from '@reach/router';
 import { Link } from 'gatsby';
 import React from 'react';
 import Helmet from 'react-helmet';
@@ -9,7 +10,7 @@ import { Spacer } from '../helpers';
 
 import './404.css';
 
-const FourOhFour = (): JSX.Element => {
+const FourOhFour = (_props: RouteComponentProps): JSX.Element => {
   const { t } = useTranslation();
   const quote = randomQuote();
   return (

client/src/i18next.d.ts

@@ -0,0 +1,8 @@
+import 'i18next';
+
+// This should not be necessary when upgrading to v23.0.0
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}

client/src/pages/404.tsx

@@ -14,9 +14,8 @@ function FourOhFourPage(): JSX.Element {
       {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
       {/* @ts-ignore */}
       <ShowProfileOrFourOhFour path={withPrefix('/:maybeUser')} />
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/* @ts-ignore */}
-      <FourOhFour default={true} />
+
+      <FourOhFour default />
     </Router>
   );
 }