Change crossword component name to fix renaming issue with build (#13177

)

* Change name to fix renaming issue with build

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} />;

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':