Removes react-helmet.

vercel-labs · manovotny · Aug 5, 2022 · Aug 5, 2022 · Aug 5, 2022 · Aug 5, 2022
commit 52fef75bfdc20b2afb68a2b9e3210740d34dce2a
diff --git a/.storybook/helpers/ampDecorator/index.jsx b/.storybook/helpers/ampDecorator/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import {
   AMP_SCRIPT,
   AMP_NO_SCRIPT,
@@ -15,7 +15,7 @@ import {
 
 const AmpDecorator = storyFn => (
   <div>
-    <Helmet htmlAttributes={{ amp: '' }}>
+    <Head>
       <link rel="canonical" href="http://foobar.com" />
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,minimum-scale=1" />
@@ -25,7 +25,7 @@ const AmpDecorator = storyFn => (
       {AMP_GEO_JS}
       {AMP_CONSENT_JS}
       {AMP_ANALYTICS_JS}
-    </Helmet>
+    </Head>
     {storyFn()}
   </div>
 );

diff --git a/package.json b/package.json
@@ -133,7 +133,6 @@
     "ramda": "0.28.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-helmet": "6.1.0",
     "react-lazyload": "3.2.0",
     "react-router": "5.3.1",
     "react-router-config": "5.1.1",

diff --git a/pages/_app.jsx b/pages/_app.jsx
@@ -14,8 +14,7 @@ import { UserContextProvider } from '#contexts/UserContext';
 
 const cache = createCache({ key: 'next' });
 
-const App = props => {
-  const { Component, pageProps, router } = props;
+const App = ({ Component, pageProps, router }) => {
   const { asPath, service } = router.query;
   const language = pageProps?.metadata?.language || 'en-gb';
   const status = 200;

diff --git a/src/app/legacy/components/MediaPlayer/Amp/index.jsx b/src/app/legacy/components/MediaPlayer/Amp/index.jsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import { string } from 'prop-types';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import ImagePlaceholder from '#psammead/psammead-image-placeholder/src';
 import Message from '../Message';
 
 const AmpHead = () => (
-  <Helmet>
+  <Head>
     <script
       async
       custom-element="amp-iframe"
       src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
     />
-  </Helmet>
+  </Head>
 );
 
 const AmpMediaPlayer = ({

diff --git a/src/app/legacy/containers/Ad/Amp/index.jsx b/src/app/legacy/containers/Ad/Amp/index.jsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { oneOf } from 'prop-types';
 import styled from '@emotion/styled';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import pathOr from 'ramda/src/pathOr';
 import { RequestContext } from '#contexts/RequestContext';
 import { ServiceContext } from '#contexts/ServiceContext';
@@ -163,11 +163,11 @@ const AmpAd = ({ slotType }) => {
 
   return (
     <>
-      <Helmet>
+      <Head>
         {AMP_ADS_JS}
         {AMP_ACCESS_JS}
         {AMP_ACCESS_FETCH(service)}
-      </Helmet>
+      </Head>
       <Advert
         service={service}
         script={script}

diff --git a/src/app/legacy/containers/Ad/Canonical/index.jsx b/src/app/legacy/containers/Ad/Canonical/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { oneOf, string } from 'prop-types';
 import styled from '@emotion/styled';
 import pathOr from 'ramda/src/pathOr';
@@ -71,15 +71,15 @@ const CanonicalAd = ({ slotType, className }) => {
 
   return (
     <>
-      <Helmet>
+      <Head>
         {/* Add Ad scripts to document head */}
         <script type="module" src={getBootstrapSrc(queryString)} async />
         <script
           nomodule="nomodule"
           src={getBootstrapSrc(queryString, true)}
           async
         />
-      </Helmet>
+      </Head>
 
       <AdContainer
         slotType={slotType}

diff --git a/src/app/legacy/containers/ChartbeatAnalytics/canonical/index.jsx b/src/app/legacy/containers/ChartbeatAnalytics/canonical/index.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { canonicalChartbeatPropTypes } from '#models/propTypes/chartbeatAnalytics';
 
 const chartbeatSource = '//static.chartbeat.com/js/chartbeat.js';
@@ -17,7 +17,7 @@ const CanonicalChartbeatBeacon = ({ chartbeatConfig }) => {
   }, [chartbeatConfig]);
 
   return (
-    <Helmet>
+    <Head>
       <script async type="text/javascript">
         {`
         (function(){
@@ -30,7 +30,7 @@ const CanonicalChartbeatBeacon = ({ chartbeatConfig }) => {
       `}
       </script>
       <script defer type="text/javascript" src={chartbeatSource} />
-    </Helmet>
+    </Head>
   );
 };
 

diff --git a/src/app/legacy/containers/ComscoreAnalytics/Canonical/index.jsx b/src/app/legacy/containers/ComscoreAnalytics/Canonical/index.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React, { useContext, useEffect } from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { UserContext } from '#contexts/UserContext';
 
 const CanonicalComscoreAnalytics = () => {
@@ -17,7 +17,7 @@ const CanonicalComscoreAnalytics = () => {
   }, [personalisationEnabled]);
 
   return (
-    <Helmet>
+    <Head>
       <script
         async
         type="text/javascript"
@@ -26,7 +26,7 @@ const CanonicalComscoreAnalytics = () => {
       <noscript>
         {`<img src="https://sb.scorecardresearch.com/p?c1=2&c2=17986528&cv=2.0&cj=1" />`}
       </noscript>
-    </Helmet>
+    </Head>
   );
 };
 

diff --git a/src/app/legacy/containers/ConsentBanner/Banner/cookie.amp.jsx b/src/app/legacy/containers/ConsentBanner/Banner/cookie.amp.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { bool, string, arrayOf, element, shape } from 'prop-types';
 import styled from '@emotion/styled';
 import { scriptPropType } from '#psammead/gel-foundations/src/prop-types';
@@ -202,13 +202,13 @@ const AmpCookieBanner = ({
 
   return (
     <div id={id} hidden={hidden}>
-      <Helmet>
+      <Head>
         <script
           async
           custom-element="amp-bind"
           src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
         />
-      </Helmet>
+      </Head>
       <Wrapper service={service}>
         <BannerPage
           data-amp-bind-hidden="isManagingSettings"

diff --git a/src/app/legacy/containers/ImageWithPlaceholder/index.jsx b/src/app/legacy/containers/ImageWithPlaceholder/index.jsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import LazyLoad from 'react-lazyload';
 import ImagePlaceholder from '#psammead/psammead-image-placeholder/src';
 import Image, { AmpImg } from '#psammead/psammead-image/src';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { C_GHOST } from '#psammead/psammead-styles/src/colours';
 import { RequestContext } from '#contexts/RequestContext';
 
@@ -70,15 +70,15 @@ const ImageWithPlaceholder = ({
   return (
     <>
       {preload && (
-        <Helmet>
+        <Head>
           <link
             rel="preload"
             as="image"
             href={src}
             imagesrcset={srcset}
             imagesizes={sizes}
           />
-        </Helmet>
+        </Head>
       )}
       <ImagePlaceholder
         forwardStyle={isLoaded ? { background: 'none' } : null}

diff --git a/src/app/legacy/containers/Include/amp/VjAmp.jsx b/src/app/legacy/containers/Include/amp/VjAmp.jsx
@@ -8,20 +8,20 @@ import {
 import { C_EBON } from '#psammead/psammead-styles/src/colours';
 import { getSansBold } from '#psammead/psammead-styles/src/font-styles';
 import { GEL_PICA } from '#psammead/gel-foundations/src/typography';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { GridItemMedium } from '#components/Grid';
 import { ServiceContext } from '#contexts/ServiceContext';
 
 const KEYLINE_WIDTH = '0.125rem';
 
 const AmpHead = () => (
-  <Helmet>
+  <Head>
     <script
       async
       custom-element="amp-iframe"
       src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
     />
-  </Helmet>
+  </H>
 );
 
 const AmpIframe = ({ children, className, width, height, src }) => (

diff --git a/src/app/legacy/containers/Include/canonical/index.jsx b/src/app/legacy/containers/Include/canonical/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import { string, number } from 'prop-types';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import styled from '@emotion/styled';
 import { GEL_SPACING_QUIN } from '#psammead/gel-foundations/src/spacings';
 import { GridItemMedium } from '#components/Grid';
@@ -38,13 +38,13 @@ const CanonicalIncludeContainer = ({ html, type, index }) => {
   return (
     <GridItemMedium>
       {requireIncludeTypes.includes(type) && (
-        <Helmet>
+        <Head>
           <script
             type="text/javascript"
             src="https://news.files.bbci.co.uk/include/vjassets/js/vendor/require-2.1.20b.min.js"
           />
           <script>{configureAdditionalScripts}</script>
-        </Helmet>
+        </Head>
       )}
       <Include
         suppressHydrationWarning

diff --git a/src/app/legacy/containers/LinkedData/index.jsx b/src/app/legacy/containers/LinkedData/index.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { string, shape, arrayOf, bool, object } from 'prop-types';
 import { ServiceContext } from '#contexts/ServiceContext';
 import { RequestContext } from '#contexts/RequestContext';
@@ -105,14 +105,14 @@ const LinkedData = ({
   };
 
   return (
-    <Helmet>
+    <Head>
       <script type="application/ld+json">
         {serialiseForScript({
           '@context': 'http://schema.org',
           '@graph': [{ ...linkedData }, ...entities],
         })}
       </script>
-    </Helmet>
+    </Head>
   );
 };
 

diff --git a/src/app/legacy/containers/Manifest/index.jsx b/src/app/legacy/containers/Manifest/index.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { ServiceContext } from '#contexts/ServiceContext';
 
 const ManifestContainer = () => {
@@ -10,9 +10,9 @@ const ManifestContainer = () => {
   }
 
   return (
-    <Helmet>
+    <Head>
       <link rel="manifest" href={`/public/${service}${manifestPath}`} />
-    </Helmet>
+    </Head>
   );
 };
 

diff --git a/src/app/legacy/containers/MediaPlayer/Metadata.jsx b/src/app/legacy/containers/MediaPlayer/Metadata.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import pathOr from 'ramda/src/pathOr';
 import { shape, string } from 'prop-types';
 import { mediaPlayerMetadata } from './helpers/metadata';
@@ -14,11 +14,11 @@ const Metadata = ({ aresMediaBlock, embedSource }) => {
   const metadata = mediaPlayerMetadata(aresMediaBlocks, embedSource);
 
   return (
-    <Helmet>
+    <Head>
       {metadata && (
         <script type="application/ld+json">{JSON.stringify(metadata)}</script>
       )}
-    </Helmet>
+    </Head>
   );
 };
 

diff --git a/src/app/legacy/containers/Metadata/index.jsx b/src/app/legacy/containers/Metadata/index.jsx
@@ -99,20 +99,13 @@ const MetadataContainer = ({
     },
   ];
 
-  const htmlAttributes = {
-    dir,
-    lang,
-    ...(isAmp && { amp: '' }), // empty value as this makes Helmet render 'amp' as per https://www.ampproject.org/docs/fundamentals/spec#ampd
-  };
-
   const pageTitle = `${title} - ${brandName}`;
   const socialTitle = `${socialHeadline || title} - ${brandName}`;
 
   const metaImage = image || defaultImage;
   const metaImageAltText = imageAltText || defaultImageAltText;
   const linkToAmpPage = hasAmpPage && !isAmp;
 
-  // MNTODO: Check head elements render correctly.
   return (
     <Head>
       <meta name="theme-color" content={themeColor} />

diff --git a/src/app/legacy/containers/MostRead/Amp/index.jsx b/src/app/legacy/containers/MostRead/Amp/index.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { string, oneOf, elementType } from 'prop-types';
 import styled from '@emotion/styled';
 import {
@@ -73,17 +73,18 @@ const AmpMostRead = ({ endpoint, size, wrapper: Wrapper }) => {
   return (
     <amp-script id="dataFunctions" script="local-script">
       <Wrapper>
-        <Helmet
-          script={[
-            {
-              id: 'local-script',
-              type: 'text/plain',
-              target: 'amp-script',
-              innerHTML: onlyinnerscript,
-            },
-          ]}
-        />
-        <Helmet>
+        <Head>
+          <script
+            id="local-script"
+            type="text/plain"
+            target="amp-script"
+            custom-element="amp-iframe"
+            src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
+          >
+            `${onlyinnerscript}`
+          </script>
+        </Head>
+        <Head>
           {/* Import required amp scripts for most read */}
           {AMP_LIST_JS}
           {AMP_MUSTACHE_JS}
@@ -97,7 +98,7 @@ const AmpMostRead = ({ endpoint, size, wrapper: Wrapper }) => {
               'base64',
             )}
           />
-        </Helmet>
+        </Head>
 
         <amp-list
           src="amp-script:dataFunctions.getRemoteData"