App Directory: `Uncaught Error: DYNAMIC_SERVER_USAGE` with NextJS 13.5.4, BlitzJS 2.0.0-beta.34

[tordans]

What is the problem?

I created a fresh blitz app, added a project model with some user relation and migrated it to the app directory.

The app now shows the error message

Unhandled Runtime Error Error: DYNAMIC_SERVER_USAGE

Call Stack updateDehydratedSuspenseComponent node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (16385:0) updateSuspenseComponent node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (16081:0)

---

Ping https://github.com/blitz-js/blitz/issues/4112 and https://github.com/blitz-js/blitz/issues/4149 but this is based on the newest blitz and next js versions.

Paste all your error logs here:

Demo app is here https://github.com/FixMyBerlin/blitz-test

Paste all relevant code snippets here:

-

What are detailed steps to reproduce this?

1. Run the demo https://github.com/FixMyBerlin/blitz-test
2. Create a user
3. Create a project
4. Open http://localhost:3000/users/1/projects, which is where I see the error first

Run blitz -v and paste the output here:

% blitz -v
Blitz version: 2.0.0-beta.33 (global)
Blitz version: 2.0.0-beta.34 (local)
macOS Ventura | darwin-arm64 | Node: v18.8.0

 Package manager: npm

  System:
    OS: macOS 13.6
    CPU: (8) arm64 Apple M1
    Memory: 40.78 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.8.0 - ~/.nvm/versions/node/v18.8.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.8.0/bin/yarn
    npm: 9.8.0 - ~/.nvm/versions/node/v18.8.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.4.2 => 5.4.2
    blitz: 2.0.0-beta.34 => 2.0.0-beta.34
    next: 13.5.4 => 13.5.4
    prisma: 5.4.2 => 5.4.2
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.2.2

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

No response

[NoahJinnn]

I also faced this issue while doing server-side rendering, I noticed that when I'm able to access my page by going from "/" to "/dashboard" BUT can not access "/dashboard" directly. In my component, I want to use useQuery to render my component. (dateString props is passed by dynamic page rendering)

// Dashboard.jsx
const Calendar = ({ dateString }: { dateString?: string | undefined }) => {
  let currentDate: Date = new Date();
  if (dateString) {
    currentDate = convertDateStringToDate(dateString);
  }
  const [scheduledClasses] = useQuery(getClasses, {
    dateString,
  });

  // ...other code
 return ( // .... )
}

The error won't appear if I removed useQuery but it is not what I want. I temporarily fixed this by forcing the code to use client-side rendering with this trick:

// DashboardLayout.jsx
const [render, setRender] = useState(false);
  useEffect(() => {
    setRender(true);
  }, []);
// ...
<AppShell.Main>{render && children}</AppShell.Main>

[tordans]

by forcing the code to use client-side rendering

I have 'use client' in every file in the app directory + blitz-client. This seems to be needed, since BlitzProvider is a client component (I just opened https://github.com/blitz-js/blitzjs.com/pull/847 to clarify this in the docs).

My understanding is, that the use client directive makes it a client component.

I temporarily fixed this by forcing the code to use client-side rendering with this trick…

I tried your setRender workaround in https://github.com/FixMyBerlin/blitz-test/commit/e31eeedc41f45fe3a6b0e2e5cbb747c522891028 but that has no effect on the error:

And adding it to the layout as well causes new hydration errors.

[tordans]

It looks like this error came from a library that we used 'osm-auth'. Once I remove it, the error is gone. I will close this here and referenced it at https://github.com/osmlab/osm-auth/issues/124.

[tordans]

@siddhsuresh FYI I reopened this ticket. We managed to somehow get rid of the error in our main flow which is why I thought it was related to the library I mentioned but that was wrong and I could have know because the demo app that this bug report is based on (https://github.com/FixMyBerlin/blitz-test) shows the error without without any special dependencies.

[siddhsuresh]

Thanks for the update @tordans I will take a look in some time.

[timeemit]

Ran into this issue while migrating a Blitz app from pages router to app router. Managed to isolate the issue to useQuery. @NoahJinnn's fix of forcing the page to render client side with the useEffect() hook worked for me.