[DynamicIO] Confusing error message when reading dynamic data inside layout (without suspense). #78760

raibima · 2025-05-02T06:23:44Z

Link to the code that reproduces this issue

https://github.com/raibima/next-confusing

To Reproduce

Prerequisite: DynamicIO flag ON.

Create a NavBar client component. Inside, read params information using the useParams hook.

'use client';
import {useParams} from 'next/navigation';

export default function NavBar() {
  const params = useParams();
  return (
    <nav>
      <pre>{JSON.stringify(params, null, 2)}</pre>
    </nav>
  );
}

Render the NavBar component in the root layout

import NavBar from './NavBar';

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
+       <NavBar />
        {children}
      </body>
    </html>
  );
}

Create a dynamic route, e.g., /[id]/page.js
Build the application

bun run build

Current vs. Expected behavior

Current error:

$ next build
   ▲ Next.js 15.4.0-canary.18
   - Experiments (use with caution):
     ✓ dynamicIO

   Creating an optimized production build ...
 ✓ Compiled successfully in 0ms
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
Error: Route "/[id]": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense
    at f (.next/server/app/page.js:1:155)
    at body (<anonymous>)
    at html (<anonymous>)
Error occurred prerendering page "/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /[id]/page: /[id], exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
error: script "build" exited with code 1

The fix is to wrap the <NavBar /> component with Suspense. However,...

It took me hours to debug this issue. Reading this message, at first I thought I needed to add a loading.js file or wrap the dynamic page with a Suspense boundary. Having done all did not solve the error. IF only the error message said something along the line "if you've done it already but still got this error, please check your layout component", it would have saved debugging time.

Even better If Next.js can pinpoint the exact line numbers. But if it's too much work, a quick win would probably be to enhance the error message like I suggested above.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Thu Dec 19 20:44:10 PST 2024; root:xnu-10063.141.1.703.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.13.1
  npm: 10.5.2
  Yarn: 1.22.22
  pnpm: 9.1.3
Relevant Packages:
  next: 15.4.0-canary.18 // Latest available version is detected (15.4.0-canary.18).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

dynamicIO

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

No response

The text was updated successfully, but these errors were encountered:

github-actions bot added the dynamicIO Related to dynamicIO. label May 2, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DynamicIO] Confusing error message when reading dynamic data inside layout (without suspense). #78760

[DynamicIO] Confusing error message when reading dynamic data inside layout (without suspense). #78760

raibima commented May 2, 2025 •

edited

Loading

[DynamicIO] Confusing error message when reading dynamic data inside layout (without suspense). #78760

[DynamicIO] Confusing error message when reading dynamic data inside layout (without suspense). #78760

Comments

raibima commented May 2, 2025 • edited Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

raibima commented May 2, 2025 •

edited

Loading