diff --git a/dotcom-rendering/src/components/Crossword.importable.tsx b/dotcom-rendering/src/components/Crossword.importable.tsx
deleted file mode 100644
index 7561ca5158c..00000000000
--- a/dotcom-rendering/src/components/Crossword.importable.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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} />
-);
diff --git a/dotcom-rendering/src/components/CrosswordComponent.importable.tsx b/dotcom-rendering/src/components/CrosswordComponent.importable.tsx
new file mode 100644
index 00000000000..f2694f9e075
--- /dev/null
+++ b/dotcom-rendering/src/components/CrosswordComponent.importable.tsx
@@ -0,0 +1,12 @@
+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,
+}: {
+	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':