From 4ebbd9265a0b1742de8f774f9662d5b5379e1d25 Mon Sep 17 00:00:00 2001
From: oliverabrahams <ollie.abrahams@guardian.co.uk>
Date: Mon, 20 Jan 2025 10:57:14 +0000
Subject: [PATCH 1/2] Change name to fix renaming issue with build

---
 ...d.importable.tsx => CrosswordComponent.importable.tsx} | 8 +++++---
 dotcom-rendering/src/lib/renderElement.tsx                | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)
 rename dotcom-rendering/src/components/{Crossword.importable.tsx => CrosswordComponent.importable.tsx} (52%)

diff --git a/dotcom-rendering/src/components/Crossword.importable.tsx b/dotcom-rendering/src/components/CrosswordComponent.importable.tsx
similarity index 52%
rename from dotcom-rendering/src/components/Crossword.importable.tsx
rename to dotcom-rendering/src/components/CrosswordComponent.importable.tsx
index 7561ca5158c..73cc7971ea4 100644
--- a/dotcom-rendering/src/components/Crossword.importable.tsx
+++ b/dotcom-rendering/src/components/CrosswordComponent.importable.tsx
@@ -1,6 +1,8 @@
 import { Crossword as ReactCrossword } from '@guardian/react-crossword-next';
 import type { CrosswordProps } from '@guardian/react-crossword-next';
 
-export const Crossword = ({ data }: { data: CrosswordProps['data'] }) => (
-	<ReactCrossword data={data} clueMinWidth={150} />
-);
+export const CrosswordComponent = ({
+	data,
+}: {
+	data: CrosswordProps['data'];
+}) => <ReactCrossword data={data} clueMinWidth={150} />;
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index c683679ee3f..6e49bf9b807 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -9,7 +9,7 @@ import { CartoonComponent } from '../components/CartoonComponent';
 import { ChartAtom } from '../components/ChartAtom.importable';
 import { CodeBlockComponent } from '../components/CodeBlockComponent';
 import { CommentBlockComponent } from '../components/CommentBlockComponent';
-import { Crossword } from '../components/Crossword.importable';
+import { CrosswordComponent } from '../components/CrosswordComponent.importable';
 import { DividerBlockComponent } from '../components/DividerBlockComponent';
 import { DocumentBlockComponent } from '../components/DocumentBlockComponent.importable';
 import { EmailSignUpWrapper } from '../components/EmailSignUpWrapper';
@@ -864,7 +864,7 @@ export const renderElement = ({
 		case 'model.dotcomrendering.pageElements.CrosswordElement':
 			return (
 				<Island priority="critical" defer={{ until: 'visible' }}>
-					<Crossword data={element.crossword} />
+					<CrosswordComponent data={element.crossword} />
 				</Island>
 			);
 		case 'model.dotcomrendering.pageElements.AudioBlockElement':

From 76f10b2d6d98a6932c7ecf5b7bddbbc7da8d6f3e Mon Sep 17 00:00:00 2001
From: oliverabrahams <ollie.abrahams@guardian.co.uk>
Date: Mon, 20 Jan 2025 15:57:24 +0000
Subject: [PATCH 2/2] add comment

---
 .../src/components/CrosswordComponent.importable.tsx          | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/dotcom-rendering/src/components/CrosswordComponent.importable.tsx b/dotcom-rendering/src/components/CrosswordComponent.importable.tsx
index 73cc7971ea4..f2694f9e075 100644
--- a/dotcom-rendering/src/components/CrosswordComponent.importable.tsx
+++ b/dotcom-rendering/src/components/CrosswordComponent.importable.tsx
@@ -1,6 +1,10 @@
 import { Crossword as ReactCrossword } from '@guardian/react-crossword-next';
 import type { CrosswordProps } from '@guardian/react-crossword-next';
 
+/*
+	The name of this component is important, when it was "Crossword"
+	webpack was renaming it and the JS wasn't loading in the client.
+ */
 export const CrosswordComponent = ({
 	data,
 }: {