Support NextJS 14+

[tordans]

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

[tordans]

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)

[tordans]

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?

[siddhsuresh]

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.

[tordans]

@siddhsuresh I see that #4263 changed https://github.com/blitz-js/blitz/blob/main/package.json#L32 to 14.0.4. But what is the reason that the starter template https://github.com/blitz-js/blitz/blob/main/packages/generator/templates/app/package.ts.json#L34 is still 13.5.4. Is there something holding blitz back from going all in on the 14.x tree? Is 13.x still recommended?

[siddhsuresh]

No @tordans , its an oversight on my part. Will fix it today.

[tordans]

@siddhsuresh Thanks!

I just remembered https://www.flightcontrol.dev/blog/nextjs-app-router-migration-the-good-bad-and-ugly

Caveat: we’re still on Next.js 13.5.4
We’ve tried Next.js 14 and things were breaking, so we haven’t been able to prioritize this upgrade yet. It seems there was a major bundling change with 14 and many folks have had challenges upgrading.
In the past, major version upgrades have been seamless, but not this one.

… and thought that might have to do with it, but all the better!

[tordans]

For reference #4309 (comment) also talks about issues with Next 14.