Skip to content

MDX components.wrapper cant be a client component with output: export #57976

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.

Sign up for GitHub

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

Jump to bottom
Open
1 task done
h3rmanj opened this issue Nov 3, 2023 · 1 comment
Open
1 task done

MDX components.wrapper cant be a client component with output: export #57976

h3rmanj opened this issue Nov 3, 2023 · 1 comment
Labels
bug Issue was opened via the bug report template. Markdown (MDX) Related to Markdown with Next.js. stale The issue has not seen recent activity.

Comments

@h3rmanj
Copy link

h3rmanj commented Nov 3, 2023 •
edited
Loading

Link to the code that reproduces this issue

https://github.com/h3rmanj/nextjs-mdx-client-wrapper-repro

To Reproduce

  1. Setup Next.js with MDX
  2. Add a page.mdx
  3. Add a client component as a wrapper to mdx-components.tsx
  4. Set output mode to export
  5. npm run build

Current vs. Expected behavior

Currently the build fails with the following output:

build output 
> nextjs-mdx-client-wrapper-repro@0.1.0 build
> next build

⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

   ▲ Next.js 14.0.4-canary.5

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types ...
   Collecting page data ...
   Generating static pages (0/5) ...

   Generating static pages (1/5) 
Error: r]: Page with `dynamic = "error"` couldn't be rendered statically because it used `searchParams.toJSON`.
    at i (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/.next/server/chunks/449.js:1:81115)
    at Object.get (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/.next/server/chunks/449.js:1:80259)
    at stringify (<anonymous>)
    at eE (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131997)
    at eR (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132440)
    at Timeout._onTimeout (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129220)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  code: 'NEXT_STATIC_GEN_BAILOUT'
}
Error: r]: Page with `dynamic = "error"` couldn't be rendered statically because it used `searchParams.toJSON`.
    at i (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/.next/server/chunks/449.js:1:81115)
    at Object.get (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/.next/server/chunks/449.js:1:80259)
    at stringify (<anonymous>)
    at eE (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131997)
    at eR (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132440)
    at Timeout._onTimeout (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129220)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  code: 'NEXT_STATIC_GEN_BAILOUT'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Page with `dynamic = "error"` couldn't be rendered statically because it used `searchParams.toJSON`.
    at i (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/.next/server/chunks/449.js:1:81115)
    at Object.get (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/.next/server/chunks/449.js:1:80259)
    at stringify (<anonymous>)
    at eE (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131997)
    at eR (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132440)
    at Timeout._onTimeout (/home/runner/work/nextjs-mdx-client-wrapper-repro/nextjs-mdx-client-wrapper-repro/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129220)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)

   Generating static pages (2/5) 

   Generating static pages (3/5) 

 ✓ Generating static pages (5/5) 

> Export encountered errors on following paths:
	/page: /
Error: Process completed with exit code 1.

I expected this to work as I haven't done anything special regarding dynamic routes.

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #15~22.04.1-Ubuntu SMP Fri Oct  6 13:20:44 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.5
  eslint-config-next: 14.0.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: export

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

App Router, MDX (@next/mdx)

Additional context

If the wrapper component is not a client component, it works.
If output is not set to export, it works.

Seems like a combination of the two.
@h3rmanj h3rmanj added the bug Issue was opened via the bug report template. label Nov 3, 2023
@github-actions github-actions bot added the Markdown (MDX) Related to Markdown with Next.js. label Nov 3, 2023
@LudoLogical LudoLogical mentioned this issue Nov 26, 2023
Open
1 task
@nextjs-bot
Copy link
Collaborator

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

@nextjs-bot nextjs-bot added the stale The issue has not seen recent activity. label May 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Markdown (MDX) Related to Markdown with Next.js. stale The issue has not seen recent activity.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@h3rmanj @nextjs-bot