Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A new app generated by blitz new causes Error: DYNAMIC_SERVER_USAGE #4112

Closed
exKAZUu opened this issue Apr 3, 2023 · 33 comments · Fixed by #4113, #4120 or #4138
Closed

A new app generated by blitz new causes Error: DYNAMIC_SERVER_USAGE #4112

exKAZUu opened this issue Apr 3, 2023 · 33 comments · Fixed by #4113, #4120 or #4138
Labels
kind/bug Something isn't working status/done
Projects

Comments

@exKAZUu
Copy link
Contributor

exKAZUu commented Apr 3, 2023

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?

  1. blitz new blitz-new-issue
  2. 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)
    
  3. cd blitz-new-issue
  4. yarn blitz dev
  5. The following error is shown

image

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.

@exKAZUu exKAZUu added kind/bug Something isn't working status/triage labels Apr 3, 2023
@dogfrogfog
Copy link

dogfrogfog commented Apr 3, 2023

I'm facing the same issue

here is my system

Blitz version: 2.0.0-beta.24 (local)
macOS Monterey | darwin-arm64 | Node: v16.19.1


 Package manager: npm

  System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
    Memory: 75.75 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/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 

@gannonh
Copy link

gannonh commented Apr 3, 2023

Same issue.

Blitz version: 2.0.0-beta.24 (global)
Blitz version: 2.0.0-beta.24 (local)
macOS Ventura | darwin-arm64 | Node: v19.0.0


 Package manager: npm

  System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Memory: 86.89 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.0.0 - ~/.nvm/versions/node/v19.0.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v19.0.0/bin/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.4 => 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 
    ```

@ShaharIlany
Copy link

ShaharIlany commented Apr 3, 2023

Same Here...

✔ 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 Hook Form
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: 345.95 MB / 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: 4.6.1 => 4.6.1 
    blitz: 2.0.0-beta.25 => 2.0.0-beta.25 
    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

@engelkes-finstreet
Copy link
Collaborator

I got it for the latest beta.25 as well:

Blitz version: 2.0.0-beta.25 (local)
macOS Ventura | darwin-arm64 | Node: v18.14.0


 Package manager: npm

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 161.38 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.0 - /var/folders/by/k0t_565n2fl32vvg5lzw2jzc0000gp/T/yarn--1680559443271-0.7400009330470727/node
    Yarn: 1.22.19 - /var/folders/by/k0t_565n2fl32vvg5lzw2jzc0000gp/T/yarn--1680559443271-0.7400009330470727/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/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: 4.6.1 => 4.6.1 
    blitz: 2.0.0-beta.25 => 2.0.0-beta.25 
    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 

@vitaliemiron
Copy link
Contributor

vitaliemiron commented Apr 4, 2023

From my investigation error comes from the last version of next.js

change the version in your package.json to

next: 13.2 => 13.1

It is working as a temp solution while I investigate this

@ShaharIlany
Copy link

ShaharIlany commented Apr 4, 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 

@vitaliemiron
Copy link
Contributor

@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.

@IamManchanda
Copy link

I am facing the same issue

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

Package manager: npm

System:
OS: macOS 13.2
CPU: (10) arm64 Apple M1 Pro
Memory: 160.33 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 18.15.0 - ~/.volta/tools/image/node/18.15.0/bin/node
Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
npm: 9.5.0 - ~/.volta/tools/image/node/18.15.0/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: 4.6.1 => 4.6.1
blitz: 2.0.0-beta.25 => 2.0.0-beta.25
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

@filips-alpe
Copy link

Temporary fix before #4113 is merged:
open package.json and change "next": "13.2" to "next": "13.2.4" (use npm ls next to find your specific version)

@randomsnowflake
Copy link

I have the same issue. Changing the version number in package.json does not fix the issue for me.

@gannonh
Copy link

gannonh commented Apr 6, 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

@engelkes-finstreet
Copy link
Collaborator

The issue persists for me and randomly appeared again in my App. I tried all different versions:

Next 13.2.4 and 13.3.0
Blitz 2.0.0-beta.26, 2.0.0-beta.25, 2.0.0-beta.24

Is there a way to fix this in an existing app?
The steps from @gannonh worked a few days ago but now the problem persists.

Toolkit automation moved this from Done to In progress Apr 11, 2023
@vanam
Copy link

vanam commented Apr 23, 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 

@flybayer
Copy link
Member

@engelkes-finstreet @vanam are you sure nextjs is getting patched correctly?

To make sure nextjs is being patched: you must use blitz build instead of next build OR run blitz codegen before next start

You should see this in your logs right at the start:

Loaded env from /Users/b/c/flightcontrol/packages/flightdeck/.env
✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated

@vanam
Copy link

vanam commented Apr 24, 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.

@LinnJS
Copy link

LinnJS commented Apr 27, 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.

I experienced the same when trying to create a new project this afternoon. Tried playing around with the dependancies and upgrading everything to latest and nuking the lock files and modules and still could not get a new project working.

@gjmoed
Copy link
Contributor

gjmoed commented Apr 27, 2023

Also ran into this, Next 13.3.1. Briefly looked into it, found this part of Blitz codegen not matching up with actual Next source:

/_onRecoverableError\.default/,
`(err) => (err.toString().includes("DYNAMIC_SERVER_USAGE") || err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : _onRecoverableError.default(err)`,

The problem here is, it's looking for _onRecoverableError.default, while for me, on 13.3.1 at least, it's _onrecoverableerror.default.

Now, manually applying the needed patch, have to watch for the same thing, towards the end of the patch, needs lowercase as well, so:
(err) => (err.toString().includes("DYNAMIC_SERVER_USAGE") || err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : _onrecoverableerror.default(err)

Then tossing .next directory, starting dev again, no more client errors, though server console now still does show the DYNAMIC_SERVER_USAGE suspense fallback messages.

Hope that helps anyone. Haven't looked into providing any PR for this just yet, sorry.

@gjmoed
Copy link
Contributor

gjmoed commented Apr 29, 2023

Looked a little bit further into this, the _onRecoverableError.default vs _onrecoverableerror.default occurs since 13.3.1.

The onRecoverableError bit didn't appear until 13.0.7 anyways, and the function first only appears in canary for 13.0.8, which became 13.1.0.

So current patching is incorrect in various ways:

  • It doesn't account for 13.0.7 at all, while the 13.0.7 code itself doesn't cover the needed changes for working with Blitz. Applying the 13 - 13.0.6 patch wouldn't work though, it'd need further work. (Blitz b26 wouldn't even run for me, with Next 13.0.x, likely wouldn't anyways, not since b24 where it started needing resolve-href from Next 13.2)

  • This should be from and including 13.1.0 up to, and including 13.3.0

    } else if (nextVersion && semver.satisfies(nextVersion, ">=13.2")) {

  • And from version 13.3.1 until who knows when, we'll need the patch I suggested in my previous comment.

Here's the thing though, because of:

"next": "13.3.0",

Why even account for anything before Next 13.3.0?

So then we should replace patching with just the 13.3.0 and >13.3.1 scenarios, or, even better, up the dependency to Next 13.3.1, and only need my suggested patch correction for 13.3.1?

@flybayer , thoughts?

@gjmoed
Copy link
Contributor

gjmoed commented Apr 29, 2023

Hmm, there's more trouble in paradise, found this in my Next 13.3.0 just now:

reactRoot = _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 : (err) => (err.toString().includes("DYNAMIC_SERVER_USAGE") || err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : (err) => (err.toString().includes("DYNAMIC_SERVER_USAGE") || err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : (err) => (err.toString().includes("DYNAMIC_SERVER_USAGE") || err.toString().includes("could not finish this Suspense boundary") || err.toString().includes("Minified React error #419")) ? null : _onRecoverableError.default(err)(err)(err)(err) });

So yeah, should do some checking if the patch has been applied already, or we'll keep applying again and again...

@gjmoed
Copy link
Contributor

gjmoed commented Apr 29, 2023

Right, so that's fairly simple:

/_onRecoverableError\.default/ vs /_onRecoverableError\.default$/

gjmoed added a commit to gjmoed/blitz that referenced this issue Apr 30, 2023
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: blitz-js#4112
@tomyumm-ge
Copy link

Same error here with 13.3.0

Latest stable is:

npm i --save next@^13.2.4

Problem disappear for me

@flybayer
Copy link
Member

flybayer commented May 1, 2023

We will get a fix out soon, but I wanted to share a bit of context.

Internally we're using the same pattern Next.js uses for bailing out of SSR, by throwing an error. They have the logic for ignoring these errors on the client, but unfortunately the error serialization is only implemented for the app directory, not pages directory.

So for us to be able to stop patching it, we need Nextjs to add this to pages directory.

Toolkit automation moved this from In progress to Done May 1, 2023
@vanam
Copy link

vanam commented May 3, 2023

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

@flybayer
Copy link
Member

flybayer commented May 8, 2023

Hi @vanam,

  1. Please wipe all your node_modules and reinstall
  2. Please verify that you are using blitz build or next build && blitz codegen

@vanam
Copy link

vanam commented May 9, 2023

I tried clean install in a new folder (both windows and linux). I tried removing node_modules and reinstall.
I used blitz dev and blitz build.

@muco-rolle
Copy link

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

@elsueno
Copy link

elsueno commented May 24, 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 

@bravo-kernel
Copy link
Contributor

bravo-kernel commented May 26, 2023

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

  1. Delete folder node_modules
  2. Delete file package-lock.json
  3. Delete folder .next
  4. Re-run npm install
  5. Run blitz dev

@KPouianou
Copy link

I have the exact same error with:
"next": "13.4.4"
"blitz": "2.0.0-beta.27"

I am only seeing this in dev mode with blitz dev. in production, blitz build && blitz start seems to work.

@bravo-kernel
Copy link
Contributor

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",

@exKAZUu
Copy link
Contributor Author

exKAZUu commented May 26, 2023

I can still reproduce the issue, so I've created a new issue (#4149) with re-created reproduction repo.

@tordans
Copy link
Contributor

tordans commented May 28, 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 [email protected]
npx blitz@latest dev

@siddhsuresh siddhsuresh reopened this Jun 10, 2023
Toolkit automation moved this from Done to In progress Jun 10, 2023
@exKAZUu
Copy link
Contributor Author

exKAZUu commented Jul 23, 2023

This issue should be fixed via #4150.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment