Next.js Discord

Discord Forum

Dynamic imports for DraftMode()

Unanswered
Yellow-breasted Bunting posted this in #help-forum
Open in Discord
Yellow-breasted BuntingOP
Hi all, I'm trying to import a heavy "Preview" component only when draft mode is enabled, but it is spilling onto the normal client bundle:

export default async function Solution() {

  const { isEnabled: isDraftMode } = draftMode()

  if (draftMode().isEnabled) {
    const SolutionPagePreview = dynamic(() => import('@/components/pages/SolutionPagePreview'))
    return <SolutionPagePreview />
  }

  if (!initial.data) {
    notFound()
  }

  return <SolutionPage />


Any idea what I could do to prevent the client poisoning?

1 Reply

Yellow-breasted BuntingOP
What is weird is if I replace either of the components with a basic div, the leaking stops..