Fix suspense error codegen patch for latest nextjs version (#4031)

* Use the new nextjs constant to check if SSR and fix suspense for nextjs 13.1 and above

* satisfy version from 13 to 13.0.6

* check for DYNAMIC_SERVER_USAGE error string for nextjs versions 13-13.0.6

* Create fluffy-coats-flow.md

* revert toolkit-app update to next 13.1

* set error message for compatability with next 13.0.7

* fix changeset

.changeset/fluffy-coats-flow.md

@@ -0,0 +1,6 @@
+---
+"@blitzjs/rpc": patch
+"blitz": patch
+---
+
+Fix suspense error codegen patch for nextjs versions 13-13.0.6

packages/blitz-rpc/src/data-client/react-query.tsx

@@ -29,6 +29,10 @@ type QueryNonLazyOptions =
   | {suspense: true; enabled: true}
   | {suspense?: never; enabled?: never}
 
+class NextError extends Error {
+  digest?: string
+}
+
 // -------------------------
 // useQuery
 // -------------------------
@@ -93,8 +97,11 @@ export function useQuery<
     (!options || !("suspense" in options) || options.suspense) &&
     (!options || !("enabled" in options) || options.enabled)
   ) {
-    const e = new Error()
+    const e = new NextError()
     e.name = "Rendering Suspense fallback..."
+    e.digest = "DYNAMIC_SERVER_USAGE"
+    // Backwards compatibility for nextjs 13.0.7
+    e.message = "DYNAMIC_SERVER_USAGE"
     delete e.stack
     throw e
   }
@@ -173,8 +180,11 @@ export function usePaginatedQuery<
     (!options || !("suspense" in options) || options.suspense) &&
     (!options || !("enabled" in options) || options.enabled)
   ) {
-    const e = new Error()
+    const e = new NextError()
     e.name = "Rendering Suspense fallback..."
+    e.digest = "DYNAMIC_SERVER_USAGE"
+    // Backwards compatibility for nextjs 13.0.7
+    e.message = "DYNAMIC_SERVER_USAGE"
     delete e.stack
     throw e
   }
@@ -265,8 +275,11 @@ export function useInfiniteQuery<
     (!options || !("suspense" in options) || options.suspense) &&
     (!options || !("enabled" in options) || options.enabled)
   ) {
-    const e = new Error()
+    const e = new NextError()
     e.name = "Rendering Suspense fallback..."
+    e.digest = "DYNAMIC_SERVER_USAGE"
+    // Backwards compatibility for nextjs 13.0.7
+    e.message = "DYNAMIC_SERVER_USAGE"
     delete e.stack
     throw e
   }

packages/blitz/package.json

@@ -64,6 +64,7 @@
     "resolve-cwd": "3.0.0",
     "resolve-from": "5.0.0",
     "rimraf": "3.0.2",
+    "semver": "7.3.8",
     "superjson": "1.11.0",
     "supports-color": "8.1.1",
     "tar": "6.1.11",

packages/blitz/src/cli/utils/codegen-tasks.ts

@@ -5,6 +5,7 @@ import {join} from "path"
 import fs from "fs-extra"
 import {getPackageJson} from "./get-package-json"
 import {runPrisma} from "../../utils/run-prisma"
+import semver from "semver"
 
 import resolveFrom from "resolve-from"
 export const codegenTasks = async () => {
@@ -18,21 +19,22 @@ export const codegenTasks = async () => {
     const readFile = await fs.readFile(nextClientIndex)
     const packageJson = await getPackageJson()
     const nextVersion = packageJson.dependencies.next
+
     if (nextVersion && /^([~^])?12/.test(nextVersion)) {
       const updatedFile = readFile
         .toString()
         .replace(
           /ReactDOM\.hydrateRoot\(.*?\);/,
-          `ReactDOM.hydrateRoot(domEl, reactEl, {onRecoverableError: (err) => (err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : console.error(err)});`,
+          `ReactDOM.hydrateRoot(domEl, reactEl, {onRecoverableError: (err) => (err.toString().includes("DYNAMIC_SERVER_USAGE") || err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : console.error(err)});`,
         )
       await fs.writeFile(nextClientIndex, updatedFile)
       log.success("Next.js was successfully patched with a React Suspense fix")
-    } else if (nextVersion && /^([~^])?13/.test(nextVersion)) {
+    } else if (nextVersion && semver.satisfies(nextVersion, "13 - 13.0.6")) {
       const updatedFile = readFile
         .toString()
         .replace(
-          /_client\.default\.hydrateRoot\(.*?\{?[\s\S]*?}?\);/,
-          `_client.default.hydrateRoot(domEl, reactEl, {onRecoverableError: (err) => (err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : console.error(err)});`,
+          /_client.default\.hydrateRoot\(.*?\);/,
+          `_client.default.hydrateRoot(domEl, reactEl, {onRecoverableError: (err) => (err.toString().includes("DYNAMIC_SERVER_USAGE") || err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : console.error(err)});`,
         )
       await fs.writeFile(nextClientIndex, updatedFile)
       log.success("Next.js was successfully patched with a React Suspense fix")