CSF referenced in MDX does not work the expected way in Docs mode

Describe the bug

When viewing a CSF that is imported in MDX by the use of <Story id="yourID" />, a strange Docs view is shown when clicking on the CSF story in the Storybook UI.

To Reproduce Steps to reproduce the behavior:

1. Create an .mdx (using @open-wc/demoing-storybook + es-dev-server but this is essentially just re-exports made to work without a build/compile step, don’t worry about them, you can import from @storybook/docs-addon/blocks directly with your own preferred way e.g. using webpack):

import { Meta, Story, html } from '@open-wc/demoing-storybook';

<Meta title="Bug Repro" />

# Bug Repro

Hello there, this is a bug reproduction.

Sup..

<Story name="Default">
  {html`
    <div>Sup Planet</div>
  `}
</Story>

Some text

<Story id="bug-repro--hello-world" />

And then create a demo.stories.js with CSF:

export default {
  title: 'Bug Repro',
};

export const helloWorld = () => {
  const myNode = document.createElement('div');
  myNode.innerHTML = 'Hello, World!';
  myNode.style.color = 'red';
  return myNode;
};

Start storybook, and click on “default” and go into docs mode (not canvas). Everything looks great!

Now click on “Hello World” and note that you get a very weird docs view, while the expectation is to get the exact same view (it should only scroll down to the hello world story, which is already in view):

The only thing visible are the two Story’s and suddenly they are wrapped in Preview which we never specified. And all of the markdown text is missing now…?

Expected behavior Precisely the same view in docs mode when clicking the MDX story as when clicking the CSF story.

System:

System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 13.3.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-a11y: ~5.0.0 => 5.0.11 

Further Thoughts

It seems to me like CSF imported in MDX e.g. by use of just reference <Story id="someID"/> kind of “works” as a soft reference. E.g. clicking the Story reference in the Storybook sidebar normally will scroll you to the right place in docs mode, but if your Story originates from an external CSF, this feature does not work.

Is the CSF considered its own thing even if referenced in the MDX? This may explain why suddenly there’s a <Preview> element with code snippet wrapped around it, because it only looks at the CSF file… where a preview element is default? Let me know if I’m thinking in the right direction.

And perhaps someone can tell me if there’s another way to import CSF into MDX in a “hard” way, so that it’s actually part of the MDX, I assume that will make it work as expected

[jorenbroekema]

Ahhh that makes sense, so not a bug then, thanks for pointing me to those docs, currently we have to use external CSF imported inside the MDX because dynamic imports don’t work in MDX (MDX-to-JS issue).

I don’t have the time to try this, I’m off on vacation for the next week so feel free to close it, I trust both of those documented ways will resolve my issue 😉.

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!