Imported MD in MDX renders unstyled

[thany]

Describe the bug When I import a bare markdown file into an MDX story, and render it, it displays unstyled (e.g. Times New Roman and default browser styles).

To Reproduce Steps to reproduce the behavior:

1. Import a markdown file into an MDX, something like this:

   
   import Readme from '../../README.md';

2. Have that trick in `main.js` to make storybook load markdown files (otherwise it'll render absolutely nothing):
  ```js
  module.exports = {
    stories: ['../src/**/*.stories.@(tsx|mdx)'],
    addons: ['@storybook/addon-docs'],

    webpackFinal: async config => {
      config.module.rules = [
        {
          test: /\.md$/,
          use: [
            {
              loader: require.resolve('babel-loader')
            },
            {
              loader: require.resolve('@mdx-js/loader')
            },
          ],
        },
        ...config.module.rules.filter(rule => rule.test.source !== '\\.md$'),
      ];
      return config;
    },
  };

3. Navigate to that story

Expected behavior Markdown renders the same as regular markdown typed straight into an MDX.

Screenshots This is how docs-only with imported markdown renders:

This is how markdown typed straight into MDX renders:

Still not great, but much better. It probably looks like that because I'm inserting global styled via styled-components into each story, which kind of leaks out into MDX. But strangely it doesn't leak out into docs-ony MDX and/or imported markdown.

So my question is:

1. Is this normal? That a docs-only imported markdown file renders unstyled?
2. Regardles of whether it's normal, where should I inject SC global styles to make them apply?

System

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 12.20.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 87.0.4280.141
    Edge: Spartan (44.19041.423.0), Chromium (87.0.664.75)
  npmPackages:
    @storybook/addon-docs: 6.1.11 => 6.1.11
    @storybook/addon-links: 6.1.11 => 6.1.11
    @storybook/addons: 6.1.11 => 6.1.11
    @storybook/react: 6.1.11 => 6.1.11

(Still fails to find Firefox)

Additional context I'm coming from the problem mentioned in #10209 (or rather #7644) and its solution worked great in SB 6.0, with styling and everything.

[thany]

Here we are, the sbdocs classes and such, are no longer applied. Here's how the DOM looks in SB 6.0:

And here it is in 6.1:

How to make it apply these classes properly?

Also mind you, setting a theme as per the documentation on that does give it a dark background for the dark theme, but still black text, and also still Times New Roman.

EDIT: this issue also applies to docs-only stories without having to import markdown. It just comes down to not having any stories in the MDX, which causes the story decorator not to be called (which inject global styles), which makes it unstyled. This also explains why Storybook-themeing is not applied to docs with stories, but instead our own global style leaks out into docs.

None of this happened in SB 6.0.

[thany]

Gotten a little further. If I replace this:

import Readme from '../../README.md';

<Readme />

with this:

import { Description } from '@storybook/addon-docs/blocks';
import Readme from '../../README.md';

<Description>{Readme}</Description>

And remove the rule to load MD as MDX from .storybook/main.js, a docs-only story looks okay again.

BUT BUT BUT: docs pages with stories in them still render incorrectly, like above (the Alert story). Our global styles are still leaking into docs, because for those docs pages, the CSS classes as mentioned above, are still not getting into the DOM.

[thany]

Okay, last update for today:

Had to uninstall @mdx-js/loader, delete the entire node_modules AND delete the package-lock.json, and then (and only then) I was able to npm i everything back and run storybook with styling applied as expected. Skipping deleting package-lock.json would result in loads of weird errors that I don't want to deal with.

Usually, deleting package-lock.json is a bad idea. So I wonder why this was neccesary. I also wonder why removing the @mdx-js/loader just sitting there supposedly doing nothing, fixes the problem. An installed package that's not being used, shouldn't be able to influence another package that uses another version (?) of it.

Anyway, this is very very very very strange. And funny, in a way. I sincerely hope the documentation can be updated shortly, because it would have been able to shed some light (a bloody articifial sun if written well) onto issues like this.

[didoesdigital]

I had a similar issue with docs only MDX stories appearing without classes and with no styling on a fresh Storybook 6.2 install.

I'm not 100% sure precisely what fixed it but I believe the fix was related to uninstalling an older @mdx-js/loader used by another dependency, docz, (without needing to remove package-lock.json), which then required explicitly installing some babel plugin dependencies to fix components building, and then installing Storybook. Hope that helps someone.

[Decipher]

I have also encountered this issue, or a similar issue with unstyled MDX.

I found that if you where to navigate to a styled docsPage and then back to the docsPage for the unstyled MDX, it will resolve.

However, after that, toggling between Docs and Canvas will result in an error:

Uncaught TypeError: docsContext.componentStories is not a function
    at getFirstStoryId (Meta.js:13:1)

The meta component could potentially add a conditional to https://github.com/storybookjs/storybook/blob/next/addons/docs/src/blocks/Meta.tsx#L12

[phobetron]

For an even more fun and similar issue, none of the sbdocs classes get applied for MDX stories registered in the .storybook/main.js if they come from a folder outside the storybook project root. Non-MDX component stories do not seem to have the same issue in their Docs tabs.

[k4lu-0p]

For an even more fun and similar issue, none of the sbdocs classes get applied for MDX stories registered in the .storybook/main.js if they come from a folder outside the storybook project root. Non-MDX component stories do not seem to have the same issue in their Docs tabs.

same behaviour here ✋

[rpressburger]

For an even more fun and similar issue, none of the sbdocs classes get applied for MDX stories registered in the .storybook/main.js if they come from a folder outside the storybook project root. Non-MDX component stories do not seem to have the same issue in their Docs tabs.

We are also seeing the same issue

[rfgamaral]

I think we are also seeing a similar issue (if not the same exact issue) as the 3 comments above mine.

@phobetron @k4lu-0p @rpressburger Have any of you found any workaround to this issue?