Support NextJS 14+

[Tobias]

What is the problem?

I did a quick test with "next": "14.0.1" (update: same for 14.0.3), which requires change to work.

I created this issue just so others can easily see that we should all be using "next": "13.5.2" as set in the repo … and to subscribe to updates on this.

FYI 13.5.6 wich seems to be the latest of the 13-tree also works fine.

Paste all your error logs here:

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

Call Stack
React
node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs (3:36)
(rsc)/./node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs
file:///Users/fmc/Development/atlas-app/.next/server/vendor-chunks/@tanstack.js (860:1)
__webpack_require__
file:///Users/fmc/Development/atlas-app/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs (8:82)
(rsc)/./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs
file:///Users/fmc/Development/atlas-app/.next/server/vendor-chunks/@tanstack.js (850:1)
__webpack_require__
file:///Users/fmc/Development/atlas-app/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./node_modules/@blitzjs/rpc/dist/index-server.mjs (49:79)
(rsc)/./node_modules/@blitzjs/rpc/dist/index-server.mjs
file:///Users/fmc/Development/atlas-app/.next/server/vendor-chunks/@blitzjs.js (576:1)
__webpack_require__
file:///Users/fmc/Development/atlas-app/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./node_modules/@blitzjs/next/dist/index-server.mjs (26:71)

What are detailed steps to reproduce this?

1. Start https://github.com/FixMyBerlin/atlas-app (Branch develop) with NextJS 14.0.1
2. Open http://127.0.0.1:5173/regionen/berlin

Run blitz -v and paste the output here:

% npx blitz -v
Blitz version: 2.0.0-beta.34 (local)
macOS Ventura | darwin-arm64 | Node: v19.2.0


 Package manager: npm

  System:
    OS: macOS 13.6
    CPU: (8) arm64 Apple M1
    Memory: 38.36 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.2.0 - ~/.nvm/versions/node/v19.2.0/bin/node
    Yarn: Not Found
    npm: 8.19.3 - ~/.nvm/versions/node/v19.2.0/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.34 => 2.0.0-beta.34
    @blitzjs/next: 2.0.0-beta.34 => 2.0.0-beta.34
    @blitzjs/rpc: 2.0.0-beta.34 => 2.0.0-beta.34
    @prisma/client: 5.6.0 => 5.6.0
    blitz: 2.0.0-beta.34 => 2.0.0-beta.34
    next: 14.0.1 => 14.0.1
    prisma: 5.6.0 => 5.6.0
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.2.2

[Tobias]

A small update…

When I manually add "use client" to the files in …

• node_modules/@tanstack/react-query/build/lib/QueryErrorResetBoundary.mjs
• node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs

I get this error:

Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'getSession')

Call Stack
getSession
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (528:58)
Generator.next
<anonymous>
next
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (52:60)
new Promise
<anonymous>
__async$1
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (36:9)
__async$1
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (507:9)
getSessionKernel
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (127:30)
Generator.next
<anonymous>
next
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (52:60)
new Promise
<anonymous>
__async$1
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (36:9)
__async$1
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (119:9)
getSession
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (160:26)
Generator.next
<anonymous>
next
node_modules/@blitzjs/auth/dist/chunks/auth-plugin.mjs (39:23)
runNextTicks
node:internal/process/task_queues (60:5)
listOnTimeout
node:internal/timers (533:9)
process.processTimers
node:internal/timers (507:7)

[Tobias]

On the topic of updating react-query…

• It looks like Blitz uses a mix of 4.24.4 and 4.13.0 and 4.0.10 right now
• The 'use client' was added in react-query in TanStack/query@1c46228 which is part of the the https://github.com/TanStack/query/releases/tag/v4.29.18 release — so I guess this will be the minimal version to update to?

[Siddharth Suresh]

On the topic of updating react-query…

• It looks like Blitz uses a mix of 4.24.4 and 4.13.0 and 4.0.10 right now
• The 'use client' was added in react-query in TanStack/query@1c46228 which is part of the the TanStack/query@v4.29.18 (release) release — so I guess this will be the minimal version to update to?

Thanks for the issue and the suggestion @tordans. I will take this up and test.