Enable replaceAll polyfill for older browsers

pimterry · pimterry · commit 3d05fe09ec70 · 2026-01-03T16:02:46.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "core-js": "^3.47.0",
     "date-fns": "^1.29.0",
     "fs-extra": "^6.0.0",
     "gray-matter": "^4.0.3",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -10,6 +10,7 @@ import { StyledLayout } from '@/components/layout/styled-layout';
 import { siteMetadata } from '@/lib/site-metadata';
 import { buildMetadata } from '@/lib/utils/build-metadata';
 import StyledComponentsRegistry from '@/styles/styled-component-registry';
+import { Polyfills } from '@/components/elements/polyfills';
 
 const PostHogPageView = dynamic(() => import('@/components/layout/posthog-page-view'), {
   ssr: false,
@@ -57,6 +58,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <Polyfills />
+
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
       <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
       <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
diff --git a/src/components/elements/polyfills/index.tsx b/src/components/elements/polyfills/index.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+// Polyfill for older browsers (more common here than we'd expect, due to testing
+// on old Android emulators etc):
+import 'core-js/actual/string/replace-all';
+
+export function Polyfills() {
+    return null;
+}
