upgrade to react 18

Author: Cansn0w

package-lock.json

@@ -30,8 +30,8 @@
   ],
   "repository": "https://github.com/Cansn0w/react-typescript-webpack-prerender-template",
   "devDependencies": {
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
@@ -57,7 +57,7 @@
     "yargs": "^17.3.1"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

package.json

@@ -4,5 +4,9 @@ import * as React from "react";
  * Important: ensure this function has no side effect for server side rendering.
  */
 export function createApp({ content }: { content: string }) {
-  return <h1>{content}</h1>;
+  return (
+    <React.StrictMode>
+      <h1>{content}</h1>
+    </React.StrictMode>
+  );
 }

src/app/create.tsx

@@ -1,8 +1,8 @@
-import * as ReactDom from "react-dom";
+import { hydrateRoot } from "react-dom/client";
 import { createApp } from "app/create";
 import "./styles.css";
 
 window.addEventListener("DOMContentLoaded", () => {
   const bootstrap = (window as any)["bootstrap"] as { content: string };
-  ReactDom.hydrate(createApp(bootstrap), document.getElementById("root"));
+  hydrateRoot(document.getElementById("root")!, createApp(bootstrap));
 });

src/hydrate.ts

@@ -1,6 +1,6 @@
 import { createApp } from "app/create";
 import * as React from "react";
-import * as ReactDom from "react-dom";
+import { createRoot } from "react-dom/client";
 import "./styles.css";
 
 class AppLoader extends React.Component<
@@ -31,4 +31,4 @@ class AppLoader extends React.Component<
   }
 }
 
-ReactDom.render(<AppLoader />, document.getElementById("root"));
+createRoot(document.getElementById("root")!).render(<AppLoader />);

src/main.tsx

@@ -15,7 +15,7 @@ import { hideBin } from "yargs/helpers";
 async function parseArgs() {
   const args = await yargs(hideBin(process.argv))
     .scriptName("prerender")
-    .usage('$0', 'prerender the webapp into static files')
+    .usage("$0", "prerender the webapp into static files")
     .option("api-dir", {
       alias: "api",
       demandOption: true,
@@ -98,7 +98,7 @@ async function prerender({ api }: { api: string }) {
   }
 
   console.log(`Rendering 404 page`);
-  const bootstrap = { content: 'not found 🔍' };
+  const bootstrap = { content: "not found 🔍" };
   write("/", render(bootstrap), "404.html");
 
   const timeTaken = new Date().getTime() - startTime;