blitz: A new app generated by `blitz new` causes `Error: DYNAMIC_SERVER_USAGE`

What is the problem?

A new app generated by blitz new (Blitz version: 2.0.0-beta.24) causes Error: DYNAMIC_SERVER_USAGE. Reproduction repo with steps: https://github.com/exKAZUu/blitz-new-issue

Paste all your error logs here:

Uncaught Error: DYNAMIC_SERVER_USAGE
    at updateDehydratedSuspenseComponent (react-dom.development.js?ac89:20662:1)
    at updateSuspenseComponent (react-dom.development.js?ac89:20362:1)
    at beginWork (react-dom.development.js?ac89:21624:1)
    at beginWork$1 (react-dom.development.js?ac89:27426:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25738:1)
    at workLoop (scheduler.development.js?c964:266:1)
    at flushWork (scheduler.development.js?c964:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?c964:533:1)

Paste all relevant code snippets here:

Nothing due to a completely new app.

What are detailed steps to reproduce this?

blitz new blitz-new-issue

Select the following items

✔ Pick a new project's language › TypeScript
✔ Pick your new app template › Full - includes DB and auth (Recommended)
✔ Install dependencies? › yarn
✔ Pick a form library (you can switch to something else later if you want) › React Final Form (recommended)

cd blitz-new-issue
yarn blitz dev
The following error is shown

Run `blitz -v` and paste the output here:

$ yarn blitz -v
yarn run v1.22.19
warning ../package.json: No license field
$ /Users/exkazuu/temp/blitz-new-issue/node_modules/.bin/blitz -v
Blitz version: 2.0.0-beta.24 (local)
macOS Ventura | darwin-arm64 | Node: v19.8.1


 Package manager: npm

  System:
    OS: macOS 13.3
    CPU: (8) arm64 Apple M1
    Memory: 305.78 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.8.1 - /var/folders/9p/8yqjg80d1n9dpmz33_v4hgj80000gn/T/yarn--1680495709340-0.42917398572189014/node
    Yarn: 1.22.19 - /var/folders/9p/8yqjg80d1n9dpmz33_v4hgj80000gn/T/yarn--1680495709340-0.42917398572189014/yarn
    npm: 9.5.1 - ~/.asdf/shims/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.24 => 2.0.0-beta.24
    @blitzjs/next: 2.0.0-beta.24 => 2.0.0-beta.24
    @blitzjs/rpc: 2.0.0-beta.24 => 2.0.0-beta.24
    @prisma/client: 4.6.1 => 4.6.1
    blitz: 2.0.0-beta.24 => 2.0.0-beta.24
    next: 13.2 => 13.2.4
    prisma: 4.6.1 => 4.6.1
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^4.8.4 => 4.9.5

Please include below any other applicable logs and screenshots that show your problem:

The section of the reproduction steps includes a screenshot.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 7
Comments: 33 (14 by maintainers)

Commits related to this issue

Adjust codegen logic for suspense patch Correctly account for Next 13.1 - 13.3.0 Add new for 13.3.1 (Yes, Blitz b26 depends on Next 13.3.0, so we could account for >=13.3 scenarios only) Fixes: #41... — committed to gjmoed/blitz by gjmoed a year ago

Most upvoted comments

Unfortunately I am still getting the same error with 2.0.0-beta.27. 😢

I have blitz installed globally on linux/windows using npm.

Blitz version: 2.0.0-beta.27 (global)
Blitz version: 2.0.0-beta.27 (local)
Windows 10 | win32-x64 | Node: v18.13.0


 Package manager: npm

  System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 6.97 GB / 31.69 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\node_modules\yarn\bin\yarn.CMD
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.27 => 2.0.0-beta.27
    @blitzjs/next: 2.0.0-beta.27 => 2.0.0-beta.27
    @blitzjs/rpc: 2.0.0-beta.27 => 2.0.0-beta.27
    @prisma/client: 4.6.1 => 4.6.1
    blitz: 2.0.0-beta.27 => 2.0.0-beta.27
    next: ^13.3.0 => 13.3.4
    prisma: 4.6.1 => 4.6.1
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^4.8.4 => 4.9.5

vanam on May 3, 2023

@flybayer I did just blitz new my-blitz-app and blitz dev from the tutorial. It looks it attempts to apply some patch but it is not working.

$ blitz dev
Loaded env from /home/martin/web2/.env.local
Loaded env from /home/martin/web2/.env
✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 2.3s (266 modules)
wait  - compiling...
event - compiled client and server successfully in 94 ms (266 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 353 ms (304 modules)
wait  - compiling...
event - compiled client and server successfully in 75 ms (304 modules)
[Rendering Suspense fallback...: DYNAMIC_SERVER_USAGE] {
  digest: 'DYNAMIC_SERVER_USAGE'
}
wait  - compiling /api/rpc/[[...blitz]] (client and server)...
event - compiled successfully in 299 ms (101 modules)

blitz build or blitz codegen also report patch being applied also with no success.

$ blitz build
Loaded env from /home/martin/web2/.env.local
Loaded env from /home/martin/web2/.env
✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated
info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[    ] info  - Generating static pages (0/7)[Rendering Suspense fallback...: DYNAMIC_SERVER_USAGE] {
  digest: 'DYNAMIC_SERVER_USAGE'
}
info  - Generating static pages (7/7)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ /                                      4.78 kB         108 kB
├   └ css/73bb8e7f935a54a7.css             1.65 kB
├   /_app                                  0 B             101 kB
├ ○ /404                                   354 B           102 kB
├ λ /api/rpc/[[...blitz]]                  0 B             101 kB
├ ○ /auth/forgot-password                  1.78 kB         125 kB
├ ○ /auth/login                            1.94 kB         127 kB
├ ○ /auth/reset-password                   1.93 kB         127 kB
└ ○ /auth/signup                           1.84 kB         125 kB
+ First Load JS shared by all              101 kB
  ├ chunks/framework-2bb1844fb22814b3.js   45.2 kB
  ├ chunks/main-4df221df76d0b5c0.js        27.8 kB
  ├ chunks/pages/_app-775d35773f258c50.js  27.3 kB
  ├ chunks/webpack-0b5d8249fb15f5f3.js     939 B
  └ css/6feb208afea48685.css               240 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

Same error at my Windows machine as well. I chose all default options during project generation: Typescript, Full, npm, React Final Form. Minimal version seems to work fine, though.

vanam on Apr 24, 2023

The same for me a fresh install of beta 2.0.0-beta.27 and I still get the same error

muco-rolle on May 10, 2023

For those experiencing this issue, this worked for me:

ctrl-c
rm -rf node_modules
rm -rf .next
open package.json and change "next": "13.2" to "next": "13.2.4" 👆
npm i
blitz dev

gannonh on Apr 6, 2023

This ticket should be reopened because the problem still exists with blitz beta 27 when running the commands below.

blitz new myAppName
cd myAppName
blitz dev

Blitz version: 2.0.0-beta.27 (local)
Linux 5.19 | linux-x64 | Node: v18.10.0


 Package manager: npm

  System:
    OS: Linux 5.19 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 3.33 GB / 14.86 GB
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.10.0 - ~/.nvs/node/18.10.0/x64/bin/node
    Yarn: 1.22.19 - ~/.nvs/node/18.10.0/x64/bin/yarn
    npm: 8.19.2 - ~/.nvs/node/18.10.0/x64/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.27 => 2.0.0-beta.27 
    @blitzjs/next: 2.0.0-beta.27 => 2.0.0-beta.27 
    @blitzjs/rpc: 2.0.0-beta.27 => 2.0.0-beta.27 
    @prisma/client: 4.6.1 => 4.6.1 
    blitz: 2.0.0-beta.27 => 2.0.0-beta.27 
    next: ^13.3.0 => 13.4.3 
    prisma: 4.6.1 => 4.6.1 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.8.4 => 4.9.5

elsueno on May 24, 2023

Following @bravo-kernel hint at updating next to 13.4.4, those steps do work for me…

npx blitz@latest new # name "test", TS, +DB, npm, React Hook Form
cd test
npm i next@13.3.4
npx blitz@latest dev

tordans on May 28, 2023

The issue is real. Solved for me against next 13.4.4 as described below:

Delete folder node_modules
Delete file package-lock.json
Delete folder .next
Re-run npm install
Run blitz dev

bravo-kernel on May 26, 2023

Probably unrelated but I just checked the commit that fixed the dev issue for me and noticed that I also bumped all next packages to 13.4.4. Basically as the first step, before running the other five described above.

    "next": "13.4.4",
    "@next/bundle-analyzer": "13.4.4",
    "eslint-config-next": "13.4.4",

bravo-kernel on May 26, 2023

Same here with "next": "^13.3.1",

Blitz version: 2.0.0-beta.26 (global)
Blitz version: 2.0.0-beta.26 (local)
Linux 5.19 | linux-x64 | Node: v18.14.2


 Package manager: npm

  System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 10.15 GB / 15.44 GB
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: Not Found
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.26 => 2.0.0-beta.26 
    @blitzjs/next: 2.0.0-beta.26 => 2.0.0-beta.26 
    @blitzjs/rpc: 2.0.0-beta.26 => 2.0.0-beta.26 
    @prisma/client: 4.6.1 => 4.6.1 
    blitz: 2.0.0-beta.26 => 2.0.0-beta.26 
    next: ^13.3.1 => 13.3.1 
    prisma: 4.6.1 => 4.6.1 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.8.4 => 4.9.5

vanam on Apr 23, 2023

@vitaliemiron I tried using next 13.2(.0) but still doesn’t work.

I read something about it on the beta docs of next 13 Here, But I am using the stable version of next13 (Pages and not App)

❯ npx blitz -v
Blitz version: 2.0.0-beta.25 (local)
macOS Ventura | darwin-arm64 | Node: v18.15.0


 Package manager: npm

  System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.58 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
  npmPackages:
    @blitzjs/auth: ^2.0.0-beta.25 => 2.0.0-beta.25 
    @blitzjs/next: ^2.0.0-beta.25 => 2.0.0-beta.25 
    @blitzjs/rpc: ^2.0.0-beta.25 => 2.0.0-beta.25 
    @prisma/client: Not Found
    blitz: ^2.0.0-beta.25 => 2.0.0-beta.25 
    next: 13.2 => 13.2.4 
    prisma: Not Found
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5

13.1 works for sure.

If you need 13.2 you can temporarily disable suspense inside useQuery

export const useCurrentUser = () => { const [user] = useQuery(getCurrentUser, null, { suspense: false }) return user }

If you have more queries, create a global query client and set suspense as default to false.

I don’t understand why this error appears, may be someone from the core team could explain to us.

vitaliemiron on Apr 4, 2023