Skip to content

Studio canvas is inert with Next 16 app hosts (dev reactDebugChannel reloads doc.write'n artboards) #376

Description

@field123

Symptom

With an app host running Next 16 (next dev), Studio loads and code components register (insert menu lists them), but the canvas is unusable:

  • clicks/hovers/inserts on artboards silently no-op
  • outline is empty, even for a brand-new page
  • right panel never opens
  • console: PromiseTimeoutError: Couldn't get userBody

Next ≤15 app hosts (e.g. examples on 15.5.9) are unaffected. Reproduced 2026-07-09 with a fresh create-plasmic-app scaffold (Next 16.2.9) against euwest Studio.

Root cause

Studio artboards are built by fetching the host page and document.write-ing it into a sourceless iframe (StudioCtx.hostPageHtmlCanvasFrame).

Next 16.2 enables a dev-mode React debug channel by default (experimental.reactDebugChannel: true in next/dist/server/config-shared.js). Its client (next/dist/client/dev/debug-channel.js) treats performance.getEntriesByType('navigation')[0].transferSize === 0 as "page restored from HTTP cache". A doc.write'n document always has transferSize === 0; the sessionStorage restore fails (the HTML came from Studio's fetch), and the client calls location.reload() as its fallback.

That reload destroys the artboard document seconds after Studio writes it. CanvasCtx keeps handles to the destroyed document, waitForUserBody times out, and the frame is never interactive. Bundler-independent (Turbopack and webpack both affected).

Minimal repro without Studio: fetch any dev-served page and document.write it into an iframe — the document self-destructs to about:blank within seconds; with the flag off it survives.

Workaround (consumer side)

// next.config.ts of the app host
experimental: { reactDebugChannel: false }

Verified: canvas overlay attaches ~6s after Studio reload; outline/selection/inserts work.

Possible actions

  1. Docs: app-hosting docs and create-plasmic-app output should call this out (fresh scaffolds get Next 16, so every new app host hits it). Alternatively create-plasmic-app could write the flag into the generated next.config.ts.
  2. Studio hardening: CanvasCtx could detect the artboard document being replaced (iframe load re-fires) and re-attach instead of holding stale handles — this would also cover other dev clients that hard-reload.
  3. Upstream: the transferSize === 0 heuristic false-positives on any doc.write'n page; consider filing against Next.js.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions