use createRoot() for node 18

instructure · Feb 16, 2024 · 2a32d33 · 2a32d33
1 parent 5cab471
commit 2a32d33
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/isp-site/src/index.js b/isp-site/src/index.js
@@ -92,7 +92,7 @@ routes.push({
 
 const router = createHashRouter(routes);
 
-const root = ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
 	<React.StrictMode>
 		<InstUISettingsProvider theme={canvas}>
 			<View as="div" minHeight="100vh" position="relative">

diff --git a/isp-site/src/routes/markdown.jsx b/isp-site/src/routes/markdown.jsx
@@ -1,6 +1,6 @@
 // Modules
 import React, { useState, useEffect } from "react";
-import reactDOM from "react-dom";
+import * as ReactDOM from "react-dom/client";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkGemoji from "remark-gemoji";
@@ -56,19 +56,20 @@ export default function Markdown({ readme }) {
 		const page = document.getElementsByTagName("body")[0].classList[0];
 		const branches = document.querySelectorAll(".markdown .contents");
 
-		for (const branch of branches) {
-			Explorer(page, branch, l).then((table) => {
-				reactDOM.render(
-					<ReactMarkdown
-						children={table}
-						remarkPlugins={[remarkGfm, remarkGemoji]}
-						rehypePlugins={[rehypeRaw]}
-						allowedElements={allowedElements}
-						components={mdtoui}
-					/>,
-					branch,
-				);
-			});
+		if (branches.length > 0) {
+			for (const branch of branches) {
+				Explorer(page, branch, l).then((table) => {
+					ReactDOM.createRoot(branch).render(
+						<ReactMarkdown
+							children={table}
+							remarkPlugins={[remarkGfm, remarkGemoji]}
+							rehypePlugins={[rehypeRaw]}
+							allowedElements={allowedElements}
+							components={mdtoui}
+						/>,
+					);
+				});
+			}
 		}
 	});