fix(EuiPageTemplate): replace CSS.escape usage with string replace …

…to fix SSR support (#7525)
elastic · Feb 13, 2024 · 13a1314 · 13a1314
1 parent b06a6e2
commit 13a1314
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/changelogs/upcoming/7525.md b/changelogs/upcoming/7525.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering in some SSR environments, particularly Next.js v13 and up
diff --git a/src/components/page_template/page_template.tsx b/src/components/page_template/page_template.tsx
@@ -141,7 +141,7 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
     restrictWidth,
     paddingSize,
     // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
-    parent: `#${CSS.escape(pageInnerId)}`,
+    parent: `#${pageInnerId.replaceAll(':', '\\:')}`,
   });
 
   const innerPanelled = () => panelled ?? Boolean(sidebar.length > 0);