Why is my Storybook failing to load in Chromatic’s Canvas tab?
Mixed content
If your stories make use of non-HTTPS content (for instance, images), the iframe rendering your stories will fail to load, as modern browsers do not allow mixed content (HTTP content sources included within HTTPS pages).
To fix this, ensure all resources used by your stories are served via HTTPS.
CORS violation
Chromatic renders your published stories in an iframe. Due to browser security restrictions,
your components and stories cannot reference window.parent
or window.top
. In
Storybook, those properties would reference the Storybook manager interface, which
is located on the same domain as the iframe and therefore allowed. But when rendered
on chromatic.com, those properties would reference a different (sub)domain and therefore
violate CORS restrictions, causing a JavaScript error. There are three ways to mitigate
this issue:
-
Don’t reference
window.parent
orwindow.top
. If you’re trying to communicate with the Storybook manager UI, it’s better to use “channels.” Storybook provides the useChannel API for this purpose. -
Conditionally avoid
window.parent
andwindow.top
by checkingisChromatic()
. We provide theisChromatic
utility to “detect” when a story is rendered inside of Chromatic. -
Wrap your
window.parent
andwindow.top
references in atry/catch
block. This will suppress the JavaScript error.