Getting "DYNAMIC_SERVER_USAGE" and Warning: A title element received an array with more than 1 element as children.

[Mr-Bull007]

What is the problem?

So, I just created a Blitz app with pages router and React Hook Form. Now, when I run blitz dev. The webpage shows 404 Not found error. While the errors in terminal have been attached herewith.

Paste all your error logs here:

$ blitz dev
Loaded env from H:\drive g\Kitzje_Course_Renewed\eventio\.env.local
Loaded env from H:\drive g\Kitzje_Course_Renewed\eventio\.env
✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated
  ▲ Next.js 13.5.6
  - Local:        http://localhost:3000
  - Environments: .env.local, .env

 ✓ Ready in 30.6s
 ○ Compiling / ...
 ✓ Compiled / in 4.1s (338 modules)
[Rendering Suspense fallback...: DYNAMIC_SERVER_USAGE] {
  digest: 'DYNAMIC_SERVER_USAGE'
}
[Rendering Suspense fallback...: DYNAMIC_SERVER_USAGE] {
  digest: 'DYNAMIC_SERVER_USAGE'
}
 ✓ Compiled /404 in 454ms (342 modules)
Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering    at title
    at head
    at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:258:1)
    at html
    at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:676:132)
    at MyDocument (webpack-internal:///./src/pages/_document.tsx:11:1)
[Rendering Suspense fallback...: DYNAMIC_SERVER_USAGE] {
  digest: 'DYNAMIC_SERVER_USAGE'
}
Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering    at title
    at head
    at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:258:1)
    at html
    at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:676:132)
    at MyDocument (webpack-internal:///./src/pages/_document.tsx:11:1)

Paste all relevant code snippets here:

Nothing because it is a completely new app.

What are detailed steps to reproduce this?

1. blitz new eventio

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

3. Now, when I open my project in VS Code and run blitz dev. It is showing the errors that I mentioned above.

Run blitz -v and paste the output here:

$ blitz -v
Blitz version: 2.2.0 (global)
Blitz version: 2.1.3 (local)
Windows 10 | win32-x64 | Node: v18.19.1


 Package manager: npm

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 1.10 GB / 7.90 GB
  Binaries:
    Node: 18.19.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @blitzjs/auth: 2.1.3 => 2.1.3
    @blitzjs/next: 2.1.3 => 2.1.3
    @blitzjs/rpc: 2.1.3 => 2.1.3
    @prisma/client: 6.1.0 => 6.1.0
    blitz: 2.1.3 => 2.1.3
    next: 13.5.6 => 13.5.6
    prisma: 6.1.0 => 6.1.0
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.7.3 => 5.7.3

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

I have shared the relevant details in the above given sections.