Next 14 Compatibility (blitz-js#4263)

* upgrade to next 14 * use default react import * use `next/compat/router` * set baseurl for next13 app * get it working * fix Error Component * fix floating promisis * Create modern-cups-cheat.md * fix type of error boundary * get react query working again * remove experimental * remove broken test since next export is removed * fix qm integration test * fix mismatch of cookie names in client and server * fix `auth-with-rpc` * fix unit tests * fix snapshot * remove `@tanstack/query-core` dep from `@blitzjs/rpc` * Update .changeset/modern-cups-cheat.md * fix: lockfile * regression: re-export react query client utilites * Update .changeset/modern-cups-cheat.md * do not export `withRouter` * revert change to `BlitzProvider` * remove unnecessary next types
991860331 · Jan 2, 2024 · b84c5be · b84c5be
1 parent f80cd3d
commit b84c5be
Show file tree

Hide file tree

Showing 45 changed files with 1,076 additions and 629 deletions.
diff --git a/.changeset/modern-cups-cheat.md b/.changeset/modern-cups-cheat.md
@@ -0,0 +1,9 @@
+---
+"@blitzjs/auth": patch
+"@blitzjs/next": patch
+"@blitzjs/rpc": patch
+"blitz": patch
+---
+
+Next 14 Compatibility
+
diff --git a/apps/next13/next.config.js b/apps/next13/next.config.js
@@ -1,11 +1,6 @@
 const {withBlitz} = require("@blitzjs/next")
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    appDir: true,
-    serverComponentsExternalPackages: ["@prisma/client", "prisma"],
-  },
-}
+const nextConfig = {}
 
 module.exports = withBlitz(nextConfig)
diff --git a/apps/next13/package.json b/apps/next13/package.json
@@ -8,6 +8,9 @@
     "blitz:start": "next start",
     "lint": "next lint"
   },
+  "prisma": {
+    "schema": "prisma/schema.prisma"
+  },
   "dependencies": {
     "@blitzjs/auth": "2.0.0-beta.36",
     "@blitzjs/config": "2.0.0-beta.36",
@@ -19,7 +22,7 @@
     "@tanstack/react-query": "4.0.10",
     "blitz": "2.0.0-beta.36",
     "flatted": "3.2.7",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "^4.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/apps/next13/prisma/dev.db b/apps/next13/prisma/dev.db
diff --git a/apps/next13/tsconfig.json b/apps/next13/tsconfig.json
@@ -14,6 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": ".",
     "plugins": [
       {
         "name": "next"

diff --git a/apps/toolkit-app-passportjs/package.json b/apps/toolkit-app-passportjs/package.json
@@ -31,7 +31,7 @@
     "@hookform/resolvers": "2.9.10",
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "openid-client": "5.2.1",
     "prisma": "4.6.1",
     "react": "18.2.0",

diff --git a/apps/toolkit-app/package.json b/apps/toolkit-app/package.json
@@ -32,7 +32,7 @@
     "@hookform/resolvers": "2.9.10",
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "next-auth": "4.18.7",
     "prisma": "4.6.1",
     "react": "18.2.0",

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -26,7 +26,7 @@
     "blitz": "2.0.0-beta.36",
     "jest": "29.3.0",
     "jest-environment-jsdom": "29.3.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "passport-mock-strategy": "2.0.0",
     "passport-twitter": "1.0.4",
     "prisma": "4.6.1",

diff --git a/integration-tests/auth-with-rpc/package.json b/integration-tests/auth-with-rpc/package.json
@@ -26,7 +26,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "delay": "5.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/integration-tests/auth/package.json b/integration-tests/auth/package.json
@@ -23,7 +23,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/integration-tests/get-initial-props/package.json b/integration-tests/get-initial-props/package.json
@@ -22,7 +22,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/integration-tests/middleware/package.json b/integration-tests/middleware/package.json
@@ -15,7 +15,7 @@
     "@blitzjs/next": "2.0.0-beta.36",
     "@blitzjs/rpc": "2.0.0-beta.36",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

diff --git a/integration-tests/next-13-app-dir/next.config.js b/integration-tests/next-13-app-dir/next.config.js
@@ -1,6 +1,2 @@
 const {withBlitz} = require("@blitzjs/next")
-module.exports = withBlitz({
-  experimental: {
-    appDir: true,
-  },
-})
+module.exports = withBlitz({})
diff --git a/integration-tests/next-13-app-dir/package.json b/integration-tests/next-13-app-dir/package.json
@@ -24,7 +24,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/integration-tests/next-13-app-dir/src/blitz-client.ts b/integration-tests/next-13-app-dir/src/blitz-client.ts
@@ -6,7 +6,7 @@ import {BlitzRpcPlugin} from "@blitzjs/rpc"
 export const {withBlitz, useSession, queryClient, BlitzProvider} = setupBlitzClient({
   plugins: [
     AuthClientPlugin({
-      cookiePrefix: "web-cookie-prefix",
+      cookiePrefix: "auth-tests-cookie-prefix",
     }),
     BlitzRpcPlugin({}),
   ],

diff --git a/integration-tests/no-suspense/package.json b/integration-tests/no-suspense/package.json
@@ -22,7 +22,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/integration-tests/qm/package.json b/integration-tests/qm/package.json
@@ -15,7 +15,7 @@
     "@prisma/client": "4.6.1",
     "@tanstack/react-query": "4.0.10",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/integration-tests/qm/test/use-query.test.tsx b/integration-tests/qm/test/use-query.test.tsx
@@ -1,6 +1,6 @@
 import {describe, it, expect, beforeAll, vi} from "vitest"
-import {act, screen, waitForElementToBeRemoved, waitFor} from "@testing-library/react"
-import {useQuery, useInfiniteQuery, BlitzRpcPlugin, QueryClientProvider} from "@blitzjs/rpc"
+import {act, screen, waitForElementToBeRemoved} from "@testing-library/react"
+import {useQuery, useInfiniteQuery, BlitzRpcPlugin, BlitzProvider} from "@blitzjs/rpc"
 import React from "react"
 import delay from "delay"
 import {buildMutationRpc, buildQueryRpc, mockRouter, render} from "../../utils/blitz-test-utils"
@@ -44,9 +44,9 @@ describe("useQuery", () => {
 
     const {rerender} = render(ui(), {
       wrapper: ({children}) => (
-        <QueryClientProvider client={globalThis.queryClient}>
+        <BlitzProvider>
           <RouterContext.Provider value={mockRouter}>{children}</RouterContext.Provider>
-        </QueryClientProvider>
+        </BlitzProvider>
       ),
     })
     return [res, () => rerender(ui())]
@@ -117,9 +117,9 @@ describe("useQuery", () => {
 
       const {rerender} = render(ui(), {
         wrapper: ({children}) => (
-          <QueryClientProvider client={globalThis.queryClient}>
+          <BlitzProvider>
             <RouterContext.Provider value={mockRouter}>{children}</RouterContext.Provider>
-          </QueryClientProvider>
+          </BlitzProvider>
         ),
       })
     })
@@ -163,9 +163,9 @@ describe("useInfiniteQuery", () => {
 
     const {rerender} = render(ui(), {
       wrapper: ({children}) => (
-        <QueryClientProvider client={globalThis.queryClient}>
+        <BlitzProvider>
           <RouterContext.Provider value={mockRouter}>{children}</RouterContext.Provider>
-        </QueryClientProvider>
+        </BlitzProvider>
       ),
     })
     return [res, () => rerender(ui())]

diff --git a/integration-tests/react-query-utils/package.json b/integration-tests/react-query-utils/package.json
@@ -21,7 +21,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/integration-tests/rpc-path-root/package.json b/integration-tests/rpc-path-root/package.json
@@ -11,7 +11,7 @@
     "@blitzjs/next": "2.0.0-beta.36",
     "@blitzjs/rpc": "2.0.0-beta.36",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

diff --git a/integration-tests/rpc/next-env.d.ts b/integration-tests/rpc/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/integration-tests/rpc/package.json b/integration-tests/rpc/package.json
@@ -11,7 +11,7 @@
     "@blitzjs/next": "2.0.0-beta.36",
     "@blitzjs/rpc": "2.0.0-beta.36",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

diff --git a/integration-tests/rpc/test/index.test.js b/integration-tests/rpc/test/index.test.js
@@ -162,13 +162,6 @@ function runTests(dev = false) {
       5000 * 60 * 2,
     )
   })
-
-  if (!dev) {
-    it("should show warning with next export", async () => {
-      const {stderr} = await nextExport(appDir, {outdir: join(appDir, "out")}, {stderr: true})
-      expect(stderr).toContain("https://nextjs.org/docs/messages/api-routes-static-export")
-    })
-  }
 }
 
 describe("RPC", () => {

diff --git a/integration-tests/rpc/tsconfig.json b/integration-tests/rpc/tsconfig.json
@@ -13,8 +13,14 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/integration-tests/trailing-slash/package.json b/integration-tests/trailing-slash/package.json
@@ -22,7 +22,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/integration-tests/utils/blitz-test-utils.tsx b/integration-tests/utils/blitz-test-utils.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import {vi} from "vitest"
 import {QueryClient} from "@tanstack/react-query"
-import {BlitzRpcPlugin, QueryClientProvider} from "@blitzjs/rpc"
+import {BlitzRpcPlugin, BlitzProvider} from "@blitzjs/rpc"
 import {NextRouter} from "next/router"
 import {RouterContext} from "@blitzjs/next"
 import {render as defaultRender} from "@testing-library/react"
@@ -40,22 +40,6 @@ export type BlitzProviderProps = {
   contextSharing?: boolean
 }
 
-const BlitzProvider = ({
-  client,
-  contextSharing = false,
-  children,
-}: BlitzProviderProps & {children: JSX.Element}) => {
-  if (globalThis.queryClient) {
-    return (
-      <QueryClientProvider client={globalThis.queryClient} contextSharing={contextSharing}>
-        {children}
-      </QueryClientProvider>
-    )
-  }
-
-  return children
-}
-
 const compose =
   (...rest) =>
   (x: React.ComponentType<any>) =>

diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "husky": "8.0.2",
     "jsdom": "^19.0.0",
     "lint-staged": "13.0.3",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "only-allow": "1.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-prisma": "4.4.0",

diff --git a/packages/blitz-auth/package.json b/packages/blitz-auth/package.json
@@ -76,7 +76,7 @@
     "@types/react": "18.0.25",
     "@types/react-dom": "17.0.14",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "next-auth": "4.18.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/blitz-auth/src/client/index.tsx b/packages/blitz-auth/src/client/index.tsx
@@ -1,6 +1,5 @@
 import {fromBase64} from "b64-lite"
 import _BadBehavior from "bad-behavior"
-import {useEffect, useState} from "react"
 import {UrlObject} from "url"
 import React, {ComponentPropsWithoutRef} from "react"
 import {
@@ -171,9 +170,9 @@ export const useSession = (options: UseSessionOptions = {}): ClientSession => {
     initialState = {...emptyPublicData, isLoading: true}
   }
 
-  const [session, setSession] = useState(initialState)
+  const [session, setSession] = React.useState(initialState)
 
-  useEffect(() => {
+  React.useEffect(() => {
     // Initialize on mount
     setSession({...getPublicDataStore().getData(), isLoading: false})
     const subscription = getPublicDataStore().observable.subscribe((data) =>
@@ -186,8 +185,8 @@ export const useSession = (options: UseSessionOptions = {}): ClientSession => {
 }
 
 export const useAuthorizeIf = (condition?: boolean, role?: string | Array<string>) => {
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => {
     setMounted(true)
   }, [])
 
@@ -233,9 +232,9 @@ export const useAuthenticatedSession = (
 }
 
 export const useRedirectAuthenticated = (to: UrlObject | string) => {
-  const [mounted, setMounted] = useState(false)
+  const [mounted, setMounted] = React.useState(false)
 
-  useEffect(() => {
+  React.useEffect(() => {
     setMounted(true)
   }, [])
 
@@ -303,9 +302,9 @@ export function getAuthValues<TProps = any>(
 function withBlitzAuthPlugin<TProps = any>(Page: ComponentType<TProps> | BlitzPage<TProps>) {
   const AuthRoot = (props: ComponentProps<any>) => {
     useSession({suspense: false})
-    const [mounted, setMounted] = useState(false)
+    const [mounted, setMounted] = React.useState(false)
 
-    useEffect(() => {
+    React.useEffect(() => {
       setMounted(true)
     }, [])
 

diff --git a/packages/blitz-next/build.config.ts b/packages/blitz-next/build.config.ts
@@ -1,7 +1,7 @@
 import {BuildConfig} from "unbuild"
 
 const config: BuildConfig = {
-  entries: ["./src/index-browser", "./src/index-server"],
+  entries: ["./src/index-browser", "./src/index-server", "./src/provider"],
   externals: ["index-browser.cjs", "index-browser.mjs", "blitz", ".blitz"],
   declaration: true,
   rollup: {

diff --git a/packages/blitz-next/package.json b/packages/blitz-next/package.json
@@ -58,7 +58,7 @@
     "blitz": "2.0.0-beta.36",
     "cross-spawn": "7.0.3",
     "find-up": "4.1.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "next-router-mock": "0.9.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",