Fixing Storyblok Visual Editor preview blank screen on Vercel with Next.js

Help
1

Hello everyone :waving_hand:
I’m experiencing an issue with the Visual Editor iframe preview on Storyblok that started after migrating our Next.js website hosting from Cloudflare to Vercel. The preview worked correctly on Cloudflare but now shows a flash of the page content followed by a blank screen. Localhost is working correctly with the preview functionality.

Environment:

  • Framework: Next.js 14.2.30 (App Router)
  • Hosting: Vercel (previously Cloudflare)
  • Storyblok SDK: @storyblok/react v5.4.18
  • Node: 22+

Behavior:

  • :white_check_mark: Website loads correctly when accessed directly on Vercel (not in iframe)
  • :cross_mark: Visual Editor iframe preview: page flashes briefly, then goes blank with JavaScript errors

Console Error in iframe:

TypeError: Cannot read properties of undefined (reading ‘min_xl’)    at 17152-ce76e94fcad2350d.js:1:41518    at ex (32209-b261eec7d073bfcb.js:1:333137)    at e.generateAndInjectStyles (32209-b261eec7d073bfcb.js:1:334219)

This error occurs in styled-components, indicating that the theme context (props.theme) is undefined when accessed inside the iframe, even though ThemeProvider is correctly wrapping the application.

What I tried (none resolved the issue):
1 - CSP Headers: Added all Storyblok domains to Content-Security-Policy:

2 - Theme fixes attempted:

  • Hardcoded entire theme object
  • Added optional chaining (?.) to all theme property accesses
  • Result: After fixing breakpoints, errors shifted to colors, then fonts, then DOM manipulation errors (appendChild, removeChild)

Key observation:
The styled-components ThemeProvider context appears to not reach components when rendered inside the Storyblok iframe, even though:

  • The same code works perfectly when accessed directly (not in iframe)
  • The same code worked when hosted on Cloudflare

Questions:

  1. Are there known differences in how Vercel serves pages in iframes vs Cloudflare that could origin this?
  2. Is there additional configuration required for an iframe with Next.js App Router on Vercel?
  3. Are there any headers or settings specific to Vercel deployments that I might be missing?
4

Hi @nfonseca-9432!

I’m the Vercel Community Bot, and I’m here to help make sure your question gets answered quickly!

To help our community team assist you better, could you please provide:

• Config files (e.g., next.config.js, vercel.json, package.json)
• Deployment/build logs
• Clear steps to reproduce the issue

Having this information will help us identify and solve your issue much faster. For more tips on getting great answers, check out How to Get Good Answers. Thanks!

5

Maybe trying adding the following in your vercel.json file:

{
  "headers": [
    {
      "source": "/(.*)",
      "has": [
        {
          "type": "header",
          "key": "referer",
          "value": "https://app.storyblok.com/(.*)"
        }
      ],
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "ALLOWALL"
        }
      ]
    }
  ]
}
6

Thanks Pauline,

I tried the configuration you suggested, but unfortunately the issue persists.

What I noticed is that the page does render successfully for a brief moment inside the Storyblok iframe, then immediately goes blank (there’s a visible flash, as shown in the attached video).

I added logs in a useEffect inside the layout to track mount/unmount, and both logs are executed, which suggests the React tree is mounting and then being unmounted shortly after.

This makes me think the iframe itself is allowed, but something is causing a client-side crash or navigation after initial render.

Let me know if there’s anything specific I should check next on the Vercel side.

example_error