Allow server-side rendering (SSR) in all components

Author: colinrotherham

src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx

@@ -1,4 +1,3 @@
-'use client';
 import React, {
   ComponentPropsWithoutRef,
   FC,

src/components/content-presentation/table/components/TableRow.tsx

@@ -1,4 +1,3 @@
-'use client';
 import classNames from 'classnames';
 import React, {
   Children,

src/components/content-presentation/tabs/Tabs.tsx

@@ -1,4 +1,3 @@
-'use client';
 import classNames from 'classnames';
 import React, {
   ComponentPropsWithoutRef,
@@ -9,7 +8,7 @@ import React, {
   useState,
 } from 'react';
 import HeadingLevel, { HeadingLevelProps } from '@components/utils/HeadingLevel';
-import { Tabs } from 'nhsuk-frontend';
+import { type Tabs } from 'nhsuk-frontend';
 
 export type TabsProps = ComponentPropsWithoutRef<'div'>;
 
@@ -62,7 +61,11 @@ const TabsComponent = forwardRef<HTMLDivElement, TabsProps>((props, forwardedRef
       return;
     }
 
-    setInstance(new Tabs(moduleRef.current));
+    const { current: $root } = moduleRef;
+
+    import('nhsuk-frontend').then(({ Tabs }) => {
+      setInstance(new Tabs($root));
+    });
   }, [moduleRef, instance]);
 
   return (

src/components/form-elements/button/Button.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, MouseEvent, useEffect, useState, forwardRef, createRef } from 'react';
 import { AsElementLink } from '@util/types/LinkTypes';
-import { Button } from 'nhsuk-frontend';
+import { type Button } from 'nhsuk-frontend';
 import classNames from 'classnames';
 
 export interface ButtonProps extends AsElementLink<HTMLButtonElement> {
@@ -44,7 +44,11 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
       return;
     }
 
-    setInstance(new Button(moduleRef.current));
+    const { current: $root } = moduleRef;
+
+    import('nhsuk-frontend').then(({ Button }) => {
+      setInstance(new Button($root));
+    });
   }, [moduleRef, instance]);
 
   return (
@@ -96,7 +100,11 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
         return;
       }
 
-      setInstance(new Button(moduleRef.current));
+      const { current: $root } = moduleRef;
+
+      import('nhsuk-frontend').then(({ Button }) => {
+        setInstance(new Button($root));
+      });
     }, [moduleRef, instance]);
 
     return (

src/components/form-elements/character-count/CharacterCount.tsx

@@ -1,6 +1,5 @@
-'use client';
 import React, { ComponentPropsWithoutRef, createRef, forwardRef, useEffect, useState } from 'react';
-import { CharacterCount } from 'nhsuk-frontend';
+import { type CharacterCount } from 'nhsuk-frontend';
 import classNames from 'classnames';
 import FormGroup from '@components/utils/FormGroup';
 import { FormElementProps } from '@util/types/FormTypes';
@@ -23,7 +22,11 @@ const CharacterCountComponent = forwardRef<HTMLTextAreaElement, CharacterCountPr
         return;
       }
 
-      setInstance(new CharacterCount(moduleRef.current));
+      const { current: $root } = moduleRef;
+
+      import('nhsuk-frontend').then(({ CharacterCount }) => {
+        setInstance(new CharacterCount($root));
+      });
     }, [moduleRef, instance]);
 
     return (

src/components/form-elements/checkboxes/Checkboxes.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, { ComponentPropsWithoutRef, createRef, forwardRef, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { FormElementProps } from '@util/types/FormTypes';
@@ -8,7 +6,7 @@ import CheckboxContext, { ICheckboxContext } from './CheckboxContext';
 import CheckboxesItem from './components/Item';
 import CheckboxesDivider from './components/Divider';
 import { generateRandomName } from '@util/RandomID';
-import { Checkboxes } from 'nhsuk-frontend';
+import { type Checkboxes } from 'nhsuk-frontend';
 
 export interface CheckboxesProps
   extends ComponentPropsWithoutRef<'div'>,
@@ -31,7 +29,11 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
       return;
     }
 
-    setInstance(new Checkboxes(moduleRef.current));
+    const { current: $root } = moduleRef;
+
+    import('nhsuk-frontend').then(({ Checkboxes }) => {
+      setInstance(new Checkboxes($root));
+    });
   }, [moduleRef, instance]);
 
   const getBoxId = (id: string, reference: string): string => {

src/components/form-elements/checkboxes/components/Item.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, {
   ComponentPropsWithRef,
   ComponentPropsWithoutRef,

src/components/form-elements/date-input/DateInput.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, {
   ChangeEvent,
   ComponentPropsWithoutRef,

src/components/form-elements/date-input/components/IndividualDateInputs.tsx

@@ -1,4 +1,3 @@
-'use client';
 import React, { ComponentPropsWithoutRef, useContext, ChangeEvent, forwardRef } from 'react';
 import classNames from 'classnames';
 import { FormElementProps } from '@util/types/FormTypes';

src/components/form-elements/error-summary/ErrorSummary.tsx

@@ -10,7 +10,7 @@ import React, {
 import classNames from 'classnames';
 import { AsElementLink } from '@util/types/LinkTypes';
 import { childIsOfComponentType } from '@util/types/TypeGuards';
-import { ErrorSummary } from 'nhsuk-frontend';
+import { type ErrorSummary } from 'nhsuk-frontend';
 
 export type TitleProps = ComponentPropsWithoutRef<'h2'>;
 
@@ -58,7 +58,7 @@ const ListItem = forwardRef<HTMLAnchorElement, ListItemProps>((props, forwardedR
   );
 });
 
-interface ErrorSummaryProps extends ComponentPropsWithoutRef<'div'> {
+export interface ErrorSummaryProps extends ComponentPropsWithoutRef<'div'> {
   disableAutoFocus?: boolean;
 }
 
@@ -72,7 +72,11 @@ const ErrorSummaryComponent = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         return;
       }
 
-      setInstance(new ErrorSummary(moduleRef.current));
+      const { current: $root } = moduleRef;
+
+      import('nhsuk-frontend').then(({ ErrorSummary }) => {
+        setInstance(new ErrorSummary($root));
+      });
     }, [moduleRef, instance]);
 
     const items = Children.toArray(children);