chore(platform): React 19 compatibility (#11901)

chargome · web-flow · commit 567b74dc9754 · 2024-11-22T12:16:08.000+01:00
diff --git a/app/globals.css b/app/globals.css
@@ -13,6 +13,7 @@
   --accent: var(--accent-purple);
   --foreground: var(--gray-12);
   --cursor-checkbox: pointer;
+  --default-font-family: var(--font-rubik) !important;
   ::selection {
     background-color: var(--accent-a7);
   }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -30,8 +30,8 @@ export const metadata: Metadata = {
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
-    <html lang="en">
-      <body className={`${rubik.variable}`}>
+    <html lang="en" suppressHydrationWarning>
+      <body className={rubik.variable} suppressHydrationWarning>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
diff --git a/apps/changelog/package.json b/apps/changelog/package.json
@@ -21,19 +21,19 @@
     "@auth/prisma-adapter": "^1.2.0",
     "@google-cloud/storage": "^7.7.0",
     "@prisma/client": "^5.8.1",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-toolbar": "^1.0.4",
-    "@radix-ui/themes": "^2.0.3",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-toolbar": "^1.1.0",
+    "@radix-ui/themes": "^3.1.3",
     "@sentry/nextjs": "8.36.0",
     "@spotlightjs/spotlight": "^2.1.1",
-    "next": "15.0.0-rc.1",
+    "next": "15.0.3",
     "next-auth": "^4.24.5",
     "next-mdx-remote": "^4.4.1",
     "nextjs-toploader": "^1.6.6",
     "nuqs": "^1.17.7",
     "prism-sentry": "^1.0.2",
-    "react": "19.0.0-rc-cd22717c-20241013",
-    "react-dom": "19.0.0-rc-cd22717c-20241013",
+    "react": "rc",
+    "react-dom": "rc",
     "react-select": "^5.7.3",
     "react-textarea-autosize": "^8.5.3",
     "rehype-prism-plus": "^1.6.3",
@@ -66,4 +66,4 @@
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   }
-}
+}
diff --git a/next.config.js b/next.config.js
@@ -50,6 +50,9 @@ const nextConfig = {
   cacheHandler: require.resolve(
     'next/dist/server/lib/incremental-cache/file-system-cache.js'
   ),
+  sassOptions: {
+    silenceDeprecations: ['legacy-js-api'],
+  },
 };
 
 module.exports = withSentryConfig(nextConfig, {
diff --git a/package.json b/package.json
@@ -45,12 +45,13 @@
     "@popperjs/core": "^2.11.8",
     "@prettier/plugin-xml": "^3.3.1",
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toolbar": "^1.0.4",
-    "@radix-ui/themes": "^2.0.3",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toolbar": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "@radix-ui/themes": "^3.1.3",
     "@sentry-internal/global-search": "^1.1.0",
     "@sentry/nextjs": "8.36.0",
     "@types/mdx": "^2.0.9",
@@ -96,7 +97,8 @@
     "server-only": "^0.0.1",
     "sharp": "^0.33.4",
     "tailwindcss-scoped-preflight": "^3.0.4",
-    "textarea-markdown-editor": "^1.0.4"
+    "textarea-markdown-editor": "^1.0.4",
+    "dompurify": "3.1.7"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.15.0",
@@ -108,12 +110,13 @@
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/ws": "^8.5.10",
+    "@types/dompurify": "3.0.5",
     "autoprefixer": "^10.4.17",
     "concurrently": "^8.2.2",
     "dotenv-cli": "^7.4.1",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
-    "eslint-config-sentry-docs": "^1.118.0",
+    "eslint-config-sentry-docs": "^2.10.0",
     "jest": "^29.5.0",
     "jest-dom": "^4.0.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -126,6 +129,11 @@
     "vitest": "^2.1.1",
     "ws": "^8.17.1"
   },
+  "resolutions": {
+    "strip-ansi": "6.0.1",
+    "dompurify": "3.1.7",
+    "@types/dompurify": "3.0.5"
+  },
   "volta": {
     "node": "20.11.0",
     "yarn": "1.22.21"
diff --git a/scripts/no-vercel-json-redirects.mjs b/scripts/no-vercel-json-redirects.mjs
@@ -1,4 +1,5 @@
 import {readFileSync} from 'fs';
+
 const vercelConfig = JSON.parse(readFileSync('./vercel.json', 'utf8'));
 
 if (vercelConfig.redirects && vercelConfig.redirects.length > 0) {
diff --git a/src/mdx-deflist.ts b/src/mdx-deflist.ts
@@ -36,8 +36,8 @@ const isdeflist = (node: Node, i: number, parent: Parent) =>
 
 export default function deflist(): Transformer {
   return tree => {
-    visit(tree, ['paragraph'], (node, i, parent: Parent) => {
-      const isdef = isdeflist(node, i!, parent as Parent);
+    visit(tree, 'paragraph', (node: Node, i, parent: Parent) => {
+      const isdef = isdeflist(node, i!, parent);
       if (!isdef) {
         return;
       }
diff --git a/src/remark-component-spacing.ts b/src/remark-component-spacing.ts
@@ -24,8 +24,8 @@ const remarkComponentSpacing: Plugin<void[], Root> = function () {
         node.type === 'mdxJsxTextElement' &&
         affectedComponents.includes(node.name ?? '')
       ) {
-        componentNode = node;
-        componentNodeParent = parent;
+        componentNode = node as Node;
+        componentNodeParent = parent as Node;
       }
     });
   };
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@`
`13`	`13`	`--accent: var(--accent-purple);`
`14`	`14`	`--foreground: var(--gray-12);`
`15`	`15`	`--cursor-checkbox: pointer;`
	`16`	`+ --default-font-family: var(--font-rubik) !important;`
`16`	`17`	`::selection {`
`17`	`18`	`background-color: var(--accent-a7);`
`18`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import {readFileSync} from 'fs';`
	`2`	`+`
`2`	`3`	`const vercelConfig = JSON.parse(readFileSync('./vercel.json', 'utf8'));`
`3`	`4`
`4`	`5`	`if (vercelConfig.redirects && vercelConfig.redirects.length > 0) {`