BREAKING: Update react-helmet-async to v2

apps/govuk-docs/package.json

@@ -56,7 +56,7 @@
     "plop": "3.1.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-helmet-async": "1.3.0",
+    "react-helmet-async": "2.0.5",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "serverless": "3.39.0",

apps/govuk-template/package.json

@@ -60,7 +60,7 @@
     "plop": "3.1.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-helmet-async": "1.3.0",
+    "react-helmet-async": "2.0.5",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "serverless": "3.39.0",

components/page/src/GovUKPage.tsx

@@ -1,5 +1,5 @@
 import { FC, createElement as h } from 'react';
-import { Helmet } from 'react-helmet-async';
+import reactHelmetDefault, * as reactHelmetNamed from 'react-helmet-async';
 import { Page, PageProps } from './Page';
 
 import favicon from 'govuk-frontend/govuk/assets/images/favicon.ico';
@@ -12,6 +12,9 @@ import ogImage from 'govuk-frontend/govuk/assets/images/govuk-opengraph-image.pn
 
 import '../assets/GovUKPage.scss';
 
+const reactHelmet = reactHelmetDefault || reactHelmetNamed;
+const { Helmet } = reactHelmet;
+
 export type GovUKPageProps = Omit<PageProps, 'govUK'>;
 
 export const GovUKPage: FC<GovUKPageProps> = ({ children, classModifiers, ...props }) => (

components/page/src/NotGovUKPage.tsx

@@ -1,5 +1,5 @@
 import { FC, createElement as h } from 'react';
-import { Helmet } from 'react-helmet-async';
+import reactHelmetDefault, * as reactHelmetNamed from 'react-helmet-async';
 import { Page, PageProps } from './Page';
 
 import favicon from '../assets/coat-favicon.ico';
@@ -11,6 +11,9 @@ import ogImage from '../assets/coat-opengraph-image.png';
 
 import '../assets/NotGovUKPage.scss';
 
+const reactHelmet = reactHelmetDefault || reactHelmetNamed;
+const { Helmet } = reactHelmet;
+
 export type NotGovUKPageProps = Omit<PageProps, 'govUK'>;
 
 export const NotGovUKPage: FC<NotGovUKPageProps> = ({ children, classModifiers, ...props }) => (

components/page/src/Page.tsx

@@ -1,5 +1,5 @@
 import { FC, Fragment, HTMLProps, ReactNode, createElement as h } from 'react';
-import { Helmet } from 'react-helmet-async';
+import reactHelmetDefault, * as reactHelmetNamed from 'react-helmet-async';
 import { BackLink } from '@not-govuk/back-link';
 import { Breadcrumb, Breadcrumbs } from '@not-govuk/breadcrumbs';
 import { StandardProps, classBuilder } from '@not-govuk/component-helpers';
@@ -12,6 +12,9 @@ import { WidthContainer } from '@not-govuk/width-container';
 
 import '../assets/Page.scss';
 
+const reactHelmet = reactHelmetDefault || reactHelmetNamed;
+const { Helmet } = reactHelmet;
+
 export type PageProps = (
   StandardProps &
   HTMLProps<HTMLDivElement> &

lib/app-composer/src/index.ts

@@ -2,7 +2,7 @@ import { GraphQLSchema } from 'graphql';
 import { ApolloClient, ApolloProvider, InMemoryCache, createHttpLink } from '@apollo/client';
 import { SchemaLink } from '@apollo/client/link/schema';
 import { ComponentType, Fragment, ReactNode, Suspense, createElement as h, lazy } from 'react';
-import { Helmet, HelmetProvider, FilledContext } from 'react-helmet-async';
+import { Helmet, HelmetProvider, HelmetServerState } from 'react-helmet-async';
 import { StaticRouter, StaticRouterProps, Switch } from 'react-router';
 import { BrowserRouter, BrowserRouterProps } from 'react-router-dom';
 import { Route, RouteComponentProps, withRouter } from '@not-govuk/route-utils';
@@ -54,6 +54,10 @@ type ServerError = {
   message: string
 };
 
+export type HelmetDataContext = {
+  helmet: HelmetServerState
+}
+
 export type ApplicationPropsSSR = ApplicationPropsCommon & {
   pages: PageInfoSSR[]
 };
@@ -63,7 +67,7 @@ export type ApplicationProps = ApplicationPropsCSR | ApplicationPropsSSR;
 type ApplicationCSR = ComponentType<ApplicationPropsCSR>;
 type ApplicationSSR = ComponentType<ApplicationPropsSSR> & {
   extractDataCache: () => object
-  helmetContext: FilledContext
+  helmetContext: HelmetDataContext
 };
 export type Application = ComponentType<ApplicationProps>;
 
@@ -304,7 +308,7 @@ export const compose: Compose = options => {
 
   return Object.assign(App, {
     extractDataCache,
-    helmetContext: helmetContext as FilledContext
+    helmetContext: helmetContext as HelmetDataContext
   });
 };
 

lib/component-test-helpers/src/index.ts

@@ -1,11 +1,14 @@
 import { FC, ReactElement, ReactNode, createElement as h } from 'react';
-import { HelmetProvider } from 'react-helmet-async';
+import reactHelmetDefault, * as reactHelmetNamed from 'react-helmet-async';
 import { MemoryRouter } from 'react-router';
 import { render as _render, RenderOptions } from '@testing-library/react';
 import userEventDefault from '@testing-library/user-event';
 
 import '@testing-library/jest-dom';
 
+const reactHelmet = reactHelmetDefault || reactHelmetNamed;
+const { HelmetProvider } = reactHelmet;
+
 const Providers: FC<{ children?: ReactNode, routerProps?: object }> = ({
   children,
   routerProps

lib/server-renderer/package.json

@@ -32,7 +32,7 @@
     "@types/react": "16.14.60",
     "@types/react-dom": "16.9.24",
     "graphql": "15.9.0",
-    "react-helmet-async": "1.3.0",
+    "react-helmet-async": "2.0.5",
     "typescript": "4.9.5"
   }
 }

package.json

@@ -82,7 +82,7 @@
     "process": "^0.11.10",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-helmet-async": "1.3.0",
+    "react-helmet-async": "2.0.5",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "ts-jest": "29.2.3",