storybook: Uncaught DOMException: Blocked a frame with origin "http://localhost:9009" from accessing a cross-origin frame.

I’m getting this when attempting to build my local by running yarn build-storybook and then opening the index.html within the storybook-static repo… Just upgraded to 6.0.21

I’m seeing this in 6.0.26. In my case, once I delete my one .mdx story, it builds and works fine. When I have a mix of js and mdx stories is when I see this error. I should also note that running yarn storybook works fine, its just when building the docs I see this error.

I solved this by opening storybook in an incognito window. It’s possible that Chrome plugins are messing with the browser.

Same problem here in 6.0.21

confirmed… It seems the stringification of the event fails

v5.3.0-beta.8 still has the Firefox bug for me. Version v5.3.9 also has the bug. Version v6.0.0-alpha.1 also has the bug.

This is still not resolved; should we re-open this or open a new issue?

I’m also having this issue. Our current workaround which worked is to disable the actions addon.

I am also seeing this when trying to use Storybook Composition. It works fine within the original storybook, but I get the same error (Uncaught DOMException: Blocked a frame with origin from accessing a cross-origin frame.) at the same line whenever trying to load a story from the lower level “composed” storybook in the higher level “composing” storybook. Both storybook instances on 6.1.5, using basically stock webpack configs. If you’d like to verify/reproduce, here is a link to our Chromatic permalink. Anyone should be able to add this as a composed story and see the issue.

Anyone have ideas for a solution or workaround?

EDIT: After further research I’ve tracked it down to a few specific stories. This error appears when storybook tries to serialize a window object from the “composed” storybook. Now why that is happening in my use case is another story. There seems to be a bug in the docs addon (docgen). For a select few of our stories using components that use Popper.js, the docgen is interpreting a default value as the window object for Popper’s placement prop (even though it is typed and assigned as 'top', not window). Still trying to track down why that is happening. Disabling the docs addon resolves the issue.

@shilman is that known? I ask because that was not always the case before v6, you could easily build an instance, compress it and share it with others. I feel like it’s possible that a lot of people in this thread are running into this because it’s not being run on a local server for whatever reason.

Head slap! Yes - that is it. For clarity, this works just fine:

 npx http-server storybook-static/

I am also seeing this issue right now with 6.0.2

Clicked actions like in the documentation are working in Chrome but not in firefox. Currently seeing this DOMException in FireFox SecurityError: Permission denied to access property "toJSON" on cross-origin object

<Button  onClick={action("clicked")}  disabled={boolean('disabled', false)}>
  {text("Children (text)", "Hello World")}
</Button>

Click the button above logs the event details in chrome but not in FireFox.

I’d also like to link a similar case here with GitHub Pages https://github.com/storybookjs/storybook-deployer/issues/97

I’m seeing this with the Storybook Design System when trying to access index.html after running yarn run build-storybook. The non-static version (yarn storybook start) runs fine.

The project is running storybook 6.1.0-rc.3.

Let me see if I can get a boiler plate going or what I have in my repo

@ndelangen it is for me:

npm ls telejson
planner@0.1.0 /Users/dick/Workspace/planner
└─┬ @storybook/react@6.0.0-alpha.1
  ├─┬ @storybook/addons@6.0.0-alpha.1
  │ └─┬ @storybook/api@6.0.0-alpha.1
  │   └── telejson@3.3.0 
  └─┬ @storybook/core@6.0.0-alpha.1
    ├─┬ @storybook/channel-postmessage@6.0.0-alpha.1
    │ └── telejson@3.3.0  deduped
    └─┬ @storybook/ui@6.0.0-alpha.1
      └── telejson@3.3.0  deduped