From 1d6ad353b2840013a1c3f8f421130e0222e1530e Mon Sep 17 00:00:00 2001
From: Kristian <53874567+kristianjokela@users.noreply.github.com>
Date: Wed, 1 Mar 2023 15:27:47 +0200
Subject: [PATCH] fix: fix i18next null translations, enable turbotrace on
 hobbies

---
 .../src/domain/event/eventCard/EventCard.tsx  | 16 ++++++++
 apps/hobbies-helsinki/next.config.js          |  4 --
 .../event/eventDetails/EventDetails.tsx       |  2 +-
 .../src/domain/event/eventHero/EventHero.tsx  |  6 +--
 .../src/domain/event/eventInfo/EventInfo.tsx  | 35 ++++++++--------
 .../event/eventInfo/EventsHierarchy.tsx       |  2 +-
 .../event/eventInfo/OrganizationInfo.tsx      | 10 +----
 .../event/eventInfo/OtherEventTimes.tsx       |  6 +--
 .../event/eventInfo/eventList/EventList.tsx   |  6 +--
 .../event/similarEvents/SimilarEvents.tsx     |  2 +-
 .../search/eventSearch/AdvancedSearch.tsx     |  6 +--
 apps/hobbies-helsinki/src/i18n.ts             | 21 ++++++++++
 .../src/pages/articles/index.tsx              |  4 +-
 .../dateRangePicker/DateRangePicker.tsx       |  6 +--
 .../components/dateSelector/DateSelector.tsx  |  2 +-
 .../useEventEnrolmentStatus.tsx               |  3 +-
 .../EventsCookieConsent.tsx                   | 40 +++++++++----------
 .../components/filterButton/FilterButton.tsx  |  8 ++--
 .../src/components/search/AutoSuggestMenu.tsx |  2 +-
 .../src/components/shareLinks/ShareLinks.tsx  |  6 +--
 packages/components/src/i18n.ts               | 21 ++++++++++
 .../components/src/utils/getLinkArrowLabel.ts |  2 +-
 22 files changed, 127 insertions(+), 83 deletions(-)
 create mode 100644 apps/hobbies-helsinki/src/i18n.ts
 create mode 100644 packages/components/src/i18n.ts

diff --git a/apps/events-helsinki/src/domain/event/eventCard/EventCard.tsx b/apps/events-helsinki/src/domain/event/eventCard/EventCard.tsx
index 6d449d336..b1888c321 100644
--- a/apps/events-helsinki/src/domain/event/eventCard/EventCard.tsx
+++ b/apps/events-helsinki/src/domain/event/eventCard/EventCard.tsx
@@ -143,7 +143,23 @@ const EventCard: React.FC<Props> = ({ event }) => {
                 showKeywords={false}
               />
             </div>
+<<<<<<< HEAD
           </BackgroundImage>
+=======
+          </div>
+          <div className={styles.buttonWrapper}>
+            <div ref={button}>
+              <IconButton
+                ariaLabel={t<string>('eventCard.ariaLabelLink', {
+                  name,
+                })}
+                icon={<IconArrowRight aria-hidden />}
+                onClick={goToEventPage}
+                size="default"
+              />
+            </div>
+          </div>
+>>>>>>> 3a115588 (fix: fix i18next null translations, enable turbotrace on hobbies)
         </div>
       </LinkBox>
     </div>
diff --git a/apps/hobbies-helsinki/next.config.js b/apps/hobbies-helsinki/next.config.js
index 4d48a8773..656c79eeb 100644
--- a/apps/hobbies-helsinki/next.config.js
+++ b/apps/hobbies-helsinki/next.config.js
@@ -176,14 +176,10 @@ const nextConfig = {
   output: 'standalone',
 
   experimental: {
-    outputFileTracingRoot: path.resolve(__dirname, '../..'),
-    /*
     turbotrace: {
       contextDirectory: path.resolve(__dirname, '../..'),
-      processCwd: path.resolve(__dirname, '../..'),
       logDetail: true,
     },
-    */
     // Prefer loading of ES Modules over CommonJS
     // @link {https://nextjs.org/blog/next-11-1#es-modules-support|Blog 11.1.0}
     // @link {https://github.com/vercel/next.js/discussions/27876|Discussion}
diff --git a/apps/hobbies-helsinki/src/domain/event/eventDetails/EventDetails.tsx b/apps/hobbies-helsinki/src/domain/event/eventDetails/EventDetails.tsx
index 731a791dc..377697b05 100644
--- a/apps/hobbies-helsinki/src/domain/event/eventDetails/EventDetails.tsx
+++ b/apps/hobbies-helsinki/src/domain/event/eventDetails/EventDetails.tsx
@@ -39,7 +39,7 @@ const EventDetails: React.FC<EventDetailsProps> = (props) => {
                 end: endTime,
                 locale,
                 includeTime: true,
-                timeAbbreviation: t('timeAbbreviation') ?? '',
+                timeAbbreviation: t('timeAbbreviation'),
               })}
             </div>
           </div>
diff --git a/apps/hobbies-helsinki/src/domain/event/eventHero/EventHero.tsx b/apps/hobbies-helsinki/src/domain/event/eventHero/EventHero.tsx
index 2a8b56822..7b67c093a 100644
--- a/apps/hobbies-helsinki/src/domain/event/eventHero/EventHero.tsx
+++ b/apps/hobbies-helsinki/src/domain/event/eventHero/EventHero.tsx
@@ -147,7 +147,7 @@ const EventHero: React.FC<Props> = ({ event, superEvent }) => {
                             locale,
                             includeTime: true,
                             timeAbbreviation:
-                              commonTranslation('timeAbbreviation') ?? '',
+                              commonTranslation('timeAbbreviation'),
                           })
                         )}
                       </InfoWithIcon>
@@ -166,7 +166,7 @@ const EventHero: React.FC<Props> = ({ event, superEvent }) => {
                   {showBuyButton && (
                     <div className={styles.buyButtonWrapper}>
                       <Button
-                        aria-label={t('hero.ariaLabelBuyTickets') ?? ''}
+                        aria-label={t('hero.ariaLabelBuyTickets')}
                         onClick={goToBuyTicketsPage}
                         iconRight={<IconLinkExternal aria-hidden />}
                         variant="success"
@@ -180,7 +180,7 @@ const EventHero: React.FC<Props> = ({ event, superEvent }) => {
                       <Button
                         theme="coat"
                         className={buttonStyles.buttonCoatBlue}
-                        aria-label={t('hero.ariaLabelEnrol') ?? ''}
+                        aria-label={t('hero.ariaLabelEnrol')}
                         onClick={() => window.open(registrationUrl)}
                       >
                         {t('hero.buttonEnrol') as string}
diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/EventInfo.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/EventInfo.tsx
index 2ddaf0e9e..eee39bc7b 100644
--- a/apps/hobbies-helsinki/src/domain/event/eventInfo/EventInfo.tsx
+++ b/apps/hobbies-helsinki/src/domain/event/eventInfo/EventInfo.tsx
@@ -121,15 +121,14 @@ const DateInfo: React.FC<{ event: EventFields }> = ({ event }) => {
     if (startTime) {
       const domain = getDomain();
       const icsEvent: EventAttributes = {
-        description:
-          t('info.textCalendarLinkDescription', {
-            description: shortDescription,
-            link: `${domain}${routerHelper.getLocalizedCmsItemUrl(
-              ROUTES.COURSES,
-              { eventId: event.id },
-              locale
-            )}`,
-          }) ?? '',
+        description: t('info.textCalendarLinkDescription', {
+          description: shortDescription,
+          link: `${domain}${routerHelper.getLocalizedCmsItemUrl(
+            ROUTES.COURSES,
+            { eventId: event.id },
+            locale
+          )}`,
+        }),
         end: endTime ? getDateArray(endTime) : getDateArray(startTime),
         location: [locationName, streetAddress, district, addressLocality]
           .filter((e) => e)
@@ -154,7 +153,7 @@ const DateInfo: React.FC<{ event: EventFields }> = ({ event }) => {
   return (
     <InfoWithIcon
       icon={<IconCalendarClock aria-hidden />}
-      title={t('info.labelDateAndTime') ?? ''}
+      title={t('info.labelDateAndTime')}
     >
       {!!startTime && (
         <>
@@ -163,7 +162,7 @@ const DateInfo: React.FC<{ event: EventFields }> = ({ event }) => {
             end: endTime,
             locale,
             includeTime: true,
-            timeAbbreviation: commonTranslation('timeAbbreviation') ?? '',
+            timeAbbreviation: commonTranslation('timeAbbreviation'),
           })}
           <button onClick={downloadIcsFile}>
             {t('info.buttonAddToCalendar')}
@@ -187,7 +186,7 @@ const LocationInfo: React.FC<{ event: EventFields }> = ({ event }) => {
   return (
     <InfoWithIcon
       icon={<IconLocation aria-hidden />}
-      title={t('info.labelLocation') ?? ''}
+      title={t('info.labelLocation')}
     >
       <Visible below="s">
         {[locationName, streetAddress, district, addressLocality]
@@ -223,7 +222,7 @@ const Audience: React.FC<{
   const { t } = useTranslation('event');
 
   return (
-    <InfoWithIcon icon={<IconGroup />} title={t('info.labelAudience') ?? ''}>
+    <InfoWithIcon icon={<IconGroup />} title={t('info.labelAudience')}>
       {(audienceMinAge || audienceMaxAge) && (
         <div>{getAudienceAgeText(t, audienceMinAge, audienceMaxAge)}</div>
       )}
@@ -240,7 +239,7 @@ const Languages: React.FC<{ languages: string[] }> = ({ languages }) => {
   return (
     <InfoWithIcon
       icon={<IconGlobe aria-hidden />}
-      title={t('info.labelLanguages') ?? ''}
+      title={t('info.labelLanguages')}
     >
       <div>{languages.join(', ')}</div>
     </InfoWithIcon>
@@ -259,7 +258,7 @@ const OtherInfo: React.FC<{
   return (
     <InfoWithIcon
       icon={<IconInfoCircle aria-hidden />}
-      title={t('info.labelOtherInfo') ?? ''}
+      title={t('info.labelOtherInfo')}
     >
       {[email, telephone]
         .filter((e) => e)
@@ -314,7 +313,7 @@ const Directions: React.FC<{
   return (
     <InfoWithIcon
       icon={<IconDirections aria-hidden />}
-      title={t('info.labelDirections') ?? ''}
+      title={t('info.labelDirections')}
     >
       <SecondaryLink className={styles.link} href={googleDirectionsLink}>
         {t('info.directionsGoogle')}
@@ -340,7 +339,7 @@ const PriceInfo: React.FC<{ event: EventFields }> = ({ event }) => {
       <Visible below="s">
         <InfoWithIcon
           icon={<IconTicket aria-hidden />}
-          title={t('info.labelPrice') ?? ''}
+          title={t('info.labelPrice')}
         >
           {eventPriceText || '-'}
         </InfoWithIcon>
@@ -350,7 +349,7 @@ const PriceInfo: React.FC<{ event: EventFields }> = ({ event }) => {
         <Visible below="s" className={styles.buyButtonWrapper}>
           <Button
             theme="coat"
-            aria-label={t('info.ariaLabelBuyTickets') ?? ''}
+            aria-label={t('info.ariaLabelBuyTickets')}
             fullWidth={true}
             onClick={moveToBuyTicketsPage}
           >
diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/EventsHierarchy.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/EventsHierarchy.tsx
index 651049c7a..5761f41e5 100644
--- a/apps/hobbies-helsinki/src/domain/event/eventInfo/EventsHierarchy.tsx
+++ b/apps/hobbies-helsinki/src/domain/event/eventInfo/EventsHierarchy.tsx
@@ -133,7 +133,7 @@ const SuperEvent: React.FC<{ superEvent: SuperEventResponse | undefined }> = ({
     <div className={styles.eventList}>
       <InfoWithIcon
         icon={<IconLayers aria-hidden />}
-        title={t('superEvent.title') ?? ''}
+        title={t('superEvent.title')}
       >
         <EventList id={superEventTestId} showName events={[superEvent.data]} />
       </InfoWithIcon>
diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/OrganizationInfo.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/OrganizationInfo.tsx
index ce0d3d98a..4b8e9e25f 100644
--- a/apps/hobbies-helsinki/src/domain/event/eventInfo/OrganizationInfo.tsx
+++ b/apps/hobbies-helsinki/src/domain/event/eventInfo/OrganizationInfo.tsx
@@ -32,18 +32,12 @@ const OrganizationInfo: React.FC<Props> = ({ event }) => {
   return (
     <>
       {provider && (
-        <InfoWithIcon
-          icon={<IconFaceSmile />}
-          title={t('info.labelOrganizer') ?? ''}
-        >
+        <InfoWithIcon icon={<IconFaceSmile />} title={t('info.labelOrganizer')}>
           <div>{provider}</div>
         </InfoWithIcon>
       )}
       {publisher && (
-        <InfoWithIcon
-          icon={<IconLayers />}
-          title={t('info.labelPublisher') ?? ''}
-        >
+        <InfoWithIcon icon={<IconLayers />} title={t('info.labelPublisher')}>
           <LoadingSpinner hasPadding={false} isLoading={loading}>
             {organizationName && (
               <>
diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/OtherEventTimes.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/OtherEventTimes.tsx
index 6d00da064..2a3d75275 100644
--- a/apps/hobbies-helsinki/src/domain/event/eventInfo/OtherEventTimes.tsx
+++ b/apps/hobbies-helsinki/src/domain/event/eventInfo/OtherEventTimes.tsx
@@ -46,7 +46,7 @@ const OtherEventTimes: React.FC<{ event: EventFields }> = ({ event }) => {
     <div className={styles.eventList}>
       <InfoWithIcon
         icon={<IconCalendarPlus aria-hidden />}
-        title={t('event:otherTimes.title') ?? ''}
+        title={t('event:otherTimes.title')}
       >
         <EventList
           id={otherEventTimesListTestId}
@@ -59,8 +59,8 @@ const OtherEventTimes: React.FC<{ event: EventFields }> = ({ event }) => {
             aria-expanded={isListOpen}
             aria-label={
               isListOpen
-                ? t('event:otherTimes.buttonHide.ariaLabel') ?? ''
-                : t('event:otherTimes.buttonShow.ariaLabel') ?? ''
+                ? t('event:otherTimes.buttonHide.ariaLabel')
+                : t('event:otherTimes.buttonShow.ariaLabel')
             }
           >
             {isListOpen
diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/eventList/EventList.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/eventList/EventList.tsx
index 3e03be904..6cd54e041 100644
--- a/apps/hobbies-helsinki/src/domain/event/eventInfo/eventList/EventList.tsx
+++ b/apps/hobbies-helsinki/src/domain/event/eventInfo/eventList/EventList.tsx
@@ -46,7 +46,7 @@ const EventList: React.FC<{
               end: event.endTime,
               includeTime: true,
               locale,
-              timeAbbreviation: commonTranslation('timeAbbreviation') ?? '',
+              timeAbbreviation: commonTranslation('timeAbbreviation'),
             })
           : '';
         return (
@@ -59,8 +59,8 @@ const EventList: React.FC<{
                 showDate
                   ? t('otherTimes.buttonReadMore', {
                       date,
-                    }) ?? ''
-                  : t('relatedEvents.buttonReadMore') ?? ''
+                    })
+                  : t('relatedEvents.buttonReadMore')
               }
             >
               <span>{`${showName ? name : ''} ${showDate ? date : ''}`}</span>
diff --git a/apps/hobbies-helsinki/src/domain/event/similarEvents/SimilarEvents.tsx b/apps/hobbies-helsinki/src/domain/event/similarEvents/SimilarEvents.tsx
index 849fdb98d..d5ae38663 100644
--- a/apps/hobbies-helsinki/src/domain/event/similarEvents/SimilarEvents.tsx
+++ b/apps/hobbies-helsinki/src/domain/event/similarEvents/SimilarEvents.tsx
@@ -89,7 +89,7 @@ const SimilarEvents: React.FC<Props> = ({
           >
             <Collection
               type={type}
-              title={t('similarEvents.title') ?? ''}
+              title={t('similarEvents.title')}
               cards={cards}
               loading={loading}
             />
diff --git a/apps/hobbies-helsinki/src/domain/search/eventSearch/AdvancedSearch.tsx b/apps/hobbies-helsinki/src/domain/search/eventSearch/AdvancedSearch.tsx
index 57d3181a7..4148e65e9 100644
--- a/apps/hobbies-helsinki/src/domain/search/eventSearch/AdvancedSearch.tsx
+++ b/apps/hobbies-helsinki/src/domain/search/eventSearch/AdvancedSearch.tsx
@@ -341,7 +341,7 @@ const AdvancedSearch: React.FC<Props> = ({
                     inputValue={placeInput}
                     name="places"
                     onChange={setSelectedPlaces}
-                    selectAllText={t('search.selectAllPlaces') ?? ''}
+                    selectAllText={t('search.selectAllPlaces')}
                     setInputValue={setPlaceInput}
                     showSearch={true}
                     showSelectAll={true}
@@ -360,9 +360,9 @@ const AdvancedSearch: React.FC<Props> = ({
                     maxInputEndValue={MAX_AGE.toString()}
                     name="ageLimitValues"
                     onChange={handleSetAgeValues}
-                    fixedValuesText={t('search.showOnlyAdultCourses') ?? ''}
+                    fixedValuesText={t('search.showOnlyAdultCourses')}
                     title={t('search.ageLimitValues')}
-                    header={t('search.ageLimitHeader') ?? ''}
+                    header={t('search.ageLimitHeader')}
                     value={[minAgeInput, maxAgeInput]}
                     withPlaceholders={false}
                   />
diff --git a/apps/hobbies-helsinki/src/i18n.ts b/apps/hobbies-helsinki/src/i18n.ts
new file mode 100644
index 000000000..143597a46
--- /dev/null
+++ b/apps/hobbies-helsinki/src/i18n.ts
@@ -0,0 +1,21 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+/*
+  i18next has changed the way it handles null values in translations. This file is required
+  to make the typescript compiler happy. See the following links for more information:
+  https://github.com/i18next/react-i18next/issues/1587
+  https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz
+*/
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}
+
+i18n.use(initReactI18next).init({
+  returnNull: false,
+});
+
+export default i18n;
diff --git a/apps/hobbies-helsinki/src/pages/articles/index.tsx b/apps/hobbies-helsinki/src/pages/articles/index.tsx
index ec0ba7bce..65085dbbb 100644
--- a/apps/hobbies-helsinki/src/pages/articles/index.tsx
+++ b/apps/hobbies-helsinki/src/pages/articles/index.tsx
@@ -113,8 +113,8 @@ export default function ArticleArchive({
         navigation={<Navigation page={page} />}
         content={
           <SearchPageContent
-            title={t('cms:archiveSearch.title') ?? ''}
-            description={t('cms:archiveSearch.description') ?? ''}
+            title={t('cms:archiveSearch.title')}
+            description={t('cms:archiveSearch.description')}
             className="articlesArchive"
             noResults={!isLoading && articles?.length === 0}
             items={articles}
diff --git a/packages/components/src/components/dateRangePicker/DateRangePicker.tsx b/packages/components/src/components/dateRangePicker/DateRangePicker.tsx
index 080fca730..a4366cd04 100644
--- a/packages/components/src/components/dateRangePicker/DateRangePicker.tsx
+++ b/packages/components/src/components/dateRangePicker/DateRangePicker.tsx
@@ -134,7 +134,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
         onChange={(date) => setInternalStartDateString(date)}
         errorText={
           errors.startDateIsInvalid
-            ? t('common:dateSelector.errorDateFormat') ?? ''
+            ? t('common:dateSelector.errorDateFormat')
             : undefined
         }
       />
@@ -156,9 +156,9 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
         onChange={(date) => setInternalEndDateString(date)}
         errorText={
           endDateIsBeforeStartDate
-            ? t('common:dateSelector.errorEndDateBeforeStartDate') ?? ''
+            ? t('common:dateSelector.errorEndDateBeforeStartDate')
             : errors.endDateIsInvalid
-            ? t('common:dateSelector.errorDateFormat') ?? ''
+            ? t('common:dateSelector.errorDateFormat')
             : undefined
         }
       />
diff --git a/packages/components/src/components/dateSelector/DateSelector.tsx b/packages/components/src/components/dateSelector/DateSelector.tsx
index f6db4b5bc..da4c327a9 100644
--- a/packages/components/src/components/dateSelector/DateSelector.tsx
+++ b/packages/components/src/components/dateSelector/DateSelector.tsx
@@ -159,7 +159,7 @@ const DateSelector: FunctionComponent<DateSelectorProps> = ({
       <button
         aria-haspopup="true"
         aria-expanded={isMenuOpen}
-        aria-label={t('common:dateSelector.title') ?? ''}
+        aria-label={t('common:dateSelector.title')}
         className={styles.button}
         onClick={toggleMenu}
         type="button"
diff --git a/packages/components/src/components/domain/event/eventEnrolmentStatus/useEventEnrolmentStatus.tsx b/packages/components/src/components/domain/event/eventEnrolmentStatus/useEventEnrolmentStatus.tsx
index cba61d24e..f24c6bdd6 100644
--- a/packages/components/src/components/domain/event/eventEnrolmentStatus/useEventEnrolmentStatus.tsx
+++ b/packages/components/src/components/domain/event/eventEnrolmentStatus/useEventEnrolmentStatus.tsx
@@ -21,8 +21,7 @@ function useEventEnrolmentStatus(event: EventFields) {
             locale,
             includeWeekday: false,
             includeTime: true,
-            timeAbbreviation:
-              commonTranslation('common:timeAbbreviation') ?? '',
+            timeAbbreviation: commonTranslation('common:timeAbbreviation'),
           })
         : '',
     }),
diff --git a/packages/components/src/components/eventsCookieConsent/EventsCookieConsent.tsx b/packages/components/src/components/eventsCookieConsent/EventsCookieConsent.tsx
index f14c32b1a..35b87fafa 100644
--- a/packages/components/src/components/eventsCookieConsent/EventsCookieConsent.tsx
+++ b/packages/components/src/components/eventsCookieConsent/EventsCookieConsent.tsx
@@ -49,29 +49,29 @@ const EventsCookieConsent: React.FC<Props> = ({
                 id: 'wordpress',
                 name: 'wordpress_*, wp-settings-*',
                 hostName: 'api.hel.fi',
-                description: t('consent:cookies.wordpress') ?? '',
-                expiration: t('consent:expiration.session') ?? '',
+                description: t('consent:cookies.wordpress'),
+                expiration: t('consent:expiration.session'),
               },
               {
                 id: 'linkedevents',
                 name: 'linkedevents-api-prod-csrftoken',
                 hostName: 'api.hel.fi',
-                description: t('consent:cookies.linkedevents') ?? '',
-                expiration: t('consent:expiration.year') ?? '',
+                description: t('consent:cookies.linkedevents'),
+                expiration: t('consent:expiration.year'),
               },
               {
                 id: 'matomo',
                 name: '_pk*',
                 hostName: 'digia.fi',
-                description: t('consent:cookies.matomo') ?? '',
-                expiration: t('consent:expiration.days', { days: 393 }) ?? '',
+                description: t('consent:cookies.matomo'),
+                expiration: t('consent:expiration.days', { days: 393 }),
               },
               {
                 id: 'i18next',
                 name: 'i18next',
                 hostName: 'api.hel.fi',
-                description: t('consent:cookies.i18next') ?? '',
-                expiration: t('consent:expiration.session') ?? '',
+                description: t('consent:cookies.i18next'),
+                expiration: t('consent:expiration.session'),
               },
             ],
           },
@@ -80,33 +80,33 @@ const EventsCookieConsent: React.FC<Props> = ({
       optionalCookies: {
         groups: [
           {
-            title: t('consent:groups.servicemap.title') ?? '',
-            text: t('consent:groups.servicemap.text') ?? '',
-            expandAriaLabel:
-              t('consent:groups.servicemap.expandAriaLabel') ?? '',
-            checkboxAriaDescription:
-              t('consent:groups.servicemap.checkboxAriaDescription') ?? '',
+            title: t('consent:groups.servicemap.title'),
+            text: t('consent:groups.servicemap.text'),
+            expandAriaLabel: t('consent:groups.servicemap.expandAriaLabel'),
+            checkboxAriaDescription: t(
+              'consent:groups.servicemap.checkboxAriaDescription'
+            ),
             cookies: [
               {
                 id: 'servicemap_analytics',
                 name: '_pk.fi*',
                 hostName: 'palvelukartta.hel.fi',
-                description: t('consent:cookies.servicemap_analytics') ?? '',
-                expiration: t('consent:expiration.days', { days: 393 }) ?? '',
+                description: t('consent:cookies.servicemap_analytics'),
+                expiration: t('consent:expiration.days', { days: 393 }),
               },
               {
                 id: 'servicemap_session',
                 name: 'ADRUM',
                 hostName: 'palvelukartta.hel.fi',
-                description: t('consent:cookies.servicemap_session') ?? '',
-                expiration: t('consent:expiration.session') ?? '',
+                description: t('consent:cookies.servicemap_session'),
+                expiration: t('consent:expiration.session'),
               },
               {
                 id: 'servicemap_ga',
                 name: '_ga*',
                 hostName: 'palvelukartta.hel.fi',
-                description: t('consent:cookies.servicemap_ga') ?? '',
-                expiration: t('consent:expiration.session') ?? '',
+                description: t('consent:cookies.servicemap_ga'),
+                expiration: t('consent:expiration.session'),
               },
             ],
           },
diff --git a/packages/components/src/components/filterButton/FilterButton.tsx b/packages/components/src/components/filterButton/FilterButton.tsx
index 29c8e412c..3d508900e 100644
--- a/packages/components/src/components/filterButton/FilterButton.tsx
+++ b/packages/components/src/components/filterButton/FilterButton.tsx
@@ -29,11 +29,9 @@ const FilterButton: React.FC<Props> = ({ onRemove, text, type, value }) => {
     <RoundedTag
       theme={theme}
       onDelete={handleRemove}
-      deleteButtonAriaLabel={
-        t('common:filter.ariaButtonRemove', {
-          filter: text,
-        }) ?? ''
-      }
+      deleteButtonAriaLabel={t('common:filter.ariaButtonRemove', {
+        filter: text,
+      })}
       className={styles.filter}
     >
       {text}
diff --git a/packages/components/src/components/search/AutoSuggestMenu.tsx b/packages/components/src/components/search/AutoSuggestMenu.tsx
index 2c245ed07..a0881792a 100644
--- a/packages/components/src/components/search/AutoSuggestMenu.tsx
+++ b/packages/components/src/components/search/AutoSuggestMenu.tsx
@@ -31,7 +31,7 @@ const AutoSuggestMenu: FunctionComponent<Props> = ({
       <div className={styles.title}>
         {t('common:autosuggest.menu.title')}
         <button
-          aria-label={t('common:autosuggest.menu.ariaButtonClose') ?? ''}
+          aria-label={t('common:autosuggest.menu.ariaButtonClose')}
           className={styles.closeButton}
           onClick={onClose}
         >
diff --git a/packages/components/src/components/shareLinks/ShareLinks.tsx b/packages/components/src/components/shareLinks/ShareLinks.tsx
index c698f8bdc..1176e9490 100644
--- a/packages/components/src/components/shareLinks/ShareLinks.tsx
+++ b/packages/components/src/components/shareLinks/ShareLinks.tsx
@@ -37,13 +37,13 @@ const ShareLinks: React.FC<ShareLinksProps> = ({ title }) => {
             successClass={styles.linkCopyButtonSuccess}
             successMessage={
               <span className={styles.successTooltip}>
-                {t('common:shareLinks.messageLinkCopySuccess') ?? ''}
+                {t('common:shareLinks.messageLinkCopySuccess')}
               </span>
             }
-            aria-label={t('common:shareLinks.buttonCopyLink') ?? ''}
+            aria-label={t('common:shareLinks.buttonCopyLink')}
           >
             <img
-              alt={t('common:shareLinks.buttonCopyLink') ?? ''}
+              alt={t('common:shareLinks.buttonCopyLink')}
               src="/shared-assets/images/share/link.svg"
             />
           </CopyButton>
diff --git a/packages/components/src/i18n.ts b/packages/components/src/i18n.ts
new file mode 100644
index 000000000..143597a46
--- /dev/null
+++ b/packages/components/src/i18n.ts
@@ -0,0 +1,21 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+/*
+  i18next has changed the way it handles null values in translations. This file is required
+  to make the typescript compiler happy. See the following links for more information:
+  https://github.com/i18next/react-i18next/issues/1587
+  https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz
+*/
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}
+
+i18n.use(initReactI18next).init({
+  returnNull: false,
+});
+
+export default i18n;
diff --git a/packages/components/src/utils/getLinkArrowLabel.ts b/packages/components/src/utils/getLinkArrowLabel.ts
index 0b56d7826..61fb72e17 100644
--- a/packages/components/src/utils/getLinkArrowLabel.ts
+++ b/packages/components/src/utils/getLinkArrowLabel.ts
@@ -22,7 +22,7 @@ export default function getLinkArrowLabel({
           locale,
           includeWeekday: false,
           includeTime: true,
-          timeAbbreviation: commonTranslation('common:timeAbbreviation') ?? '',
+          timeAbbreviation: commonTranslation('common:timeAbbreviation'),
         })
       : '',
   });