Typescript CSF stories with MDX docs fails .mdx import

[bmayen]

Describe the bug I have an Angular library and am writing CSF stories in typescript. I want to mix CSF with MDX docs according to https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs. The import mdx from './Button.mdx'; line fails. Looks like this is a typing issues, but when I add the *.mdx typing from https://mdxjs.com/advanced/typescript, the signature doesn't actually match what the default import returns.

Default mdx import is returning

{
  includeStories: [],
  parameters: {
    docs: {
      container: ({ context, children }) => {…},
      page: ƒ MDXContent({ components, ...props })
    }
  }
}

This also does not match what the Storybook documentation above suggests, as it assigns mdx as:

export default {
  title: 'Demo/Button',
  parameters: {
    docs: {
      page: mdx,
    },
  },
};

[bmayen]

Confirming that if I change mdx.d.ts typing to

declare module '*.mdx' {
  let mdx: any;
  export default mdx;
}

everything works as expected. Should have stricter typing than any, but just confirming/demonstrating where the problem was.

[shilman]

@bmayen can you paste your presets/config? the default export from a normal MDX file should be a react component unless you're passing it through storybook's MDX compiler plugin. The documentation is written assuming you're using the default setup, which would only do that if the file was suffixed ".stories.mdx"

[bmayen]

Ah, you're right, I was passing it through the Storybook MDX compiler because I changed the webpack test line to just .mdx in my config 🤦‍♂

In my case, I'm trying to: a) mix CSF stories with MDX docs so I can leverage MDX but still have storysource in the canvas b) have some pure MDX stories alongside the mixed

For 'a', I am using .stories.ts and .mdx. And for 'b' I am using .stories.mdx. So after updating my webpack config to use .stories.mdx, I get the following error for the .mdx imports in my CSF stories: "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

Which I now remember is why I originally changed the webpack config to just .mdx :)

So I need webpack to also handle .mdx for the CSF file imports, but not through the Storybook MDX compiler plugin. Is there an example of that here?

[shilman]

@bmayen the preset does exactly that: https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts#L59

[bmayen]

Indeed it does! Thanks for the support.

This could be useful to add to the custom webpack config. But I'll close this issue since it isn't really valid.