Adding a link breaks docs page in composition host storybook

After upgrading from v5 to v6, and implementing the composition feature, it looks like links in the different docs page in the storybooks breaks the host storybook.

The error thrown:

Uncaught DOMException: Blocked a frame with origin "http://localhost:6002" from accessing a cross-origin frame.
    at Link (http://localhost:6002/vendors~main.2fda63c8d929018b1d7c.bundle.js:77355:88)

Removing the link in the story fixes the issue.

I’ve tried two ways of adding links to the docs page: one with markup and then other is jsx a href and both breaks the docs page in the host storybook.

[ndelangen]

I think the link component should be changed to:

const Link: FunctionComponent<any> = ({ href: input, children, ...props }) => {
  const isStorybookPath = /^\//.test(input);
  const isAnchorUrl = /^#.*/.test(input);

  const href = isStorybookPath ? `?path=${input}` : input;
  const target = isAnchorUrl ? '_self' : '_top';

  return (
    <a href={href} target={target} {...props}>
      {children}
    </a>
  );
};

@dvh91 would you be able to open a PR changing this?

[shilman]

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.12 containing PR #13022 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade