MDX files not rendering

[BryanHunt]

Describe the bug
Attempting to render any .stories.mdx file results in the following error:

Uncaught TypeError: Object(...) is not a function
    at page (main.stories.mdx:41:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at mountIndeterminateComponent (react-dom.development.js:17482:1)
    at beginWork (react-dom.development.js:18596:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23203:1)
    at performUnitOfWork (react-dom.development.js:22157:1)
    at workLoopSync (react-dom.development.js:22130:1)

Inspecting the top of stack shows:

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  ...(componentMeta.parameters.docs || {}),
  page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentAnnotations={componentMeta}><MDXContent /></AddContext>,
};

To Reproduce
Create the following main.stories.mdx:

import { Meta } from '@storybook/addon-docs';

<Meta title="Main"/>

Hello

System
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.13.2 - ~/.volta/tools/image/node/16.13.2/bin/node
    Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
    npm: 8.1.2 - ~/.volta/tools/image/node/16.13.2/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Safari: 15.2

[shilman]

MDX released a breaking change & I'm pretty sure that we've covered our bases to force the old version. However, it's possible that somehow the new version is getting installed. I'd love to get to the bottom of this!

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

[davidcalhoun]

Also experiencing this when we try to update @mdx-js/react to v2.

I think somehow Storybook or the MDX parser is relying on @mdx-js/react to be installed as a peer dependency, and trying to use that? Seems to be the case, since when I remove @mdx-js/react from my project's devDependencies I end up with this error when trying to run Storybook: ModuleNotFoundError: Module not found: Error: Can't resolve '@mdx-js/react'

[rikkit]

Can confirm downgrading to v1.6.22 of @mdx-js/react works for me. I am using Yarn PnP so I had to specifically install it to prevent Yarn complaining - and I installed the latest v2 without looking into it.

[davidcalhoun]

Worth noting I'm also using Yarn PnP here!

[eric-burel]

Just to add more docs on this: https://mdxjs.com/migrating/v2/, we now need to specify the React dependency explicitely.

Repro at Vulcan by upgrading to v2: https://github.com/VulcanJS/vulcan-npm.
Repro: yarn, yarn up @mdx-js/loader@2 @mdx-js/react@2, cd starters/vulcan-next, yarn storybook.

@shilman Next take on this is interesting, as you can provide options to the mdx loader: https://github.com/vercel/next.js
This way users can follow the v2 upgrade doc themselves by altering the config at app level. So adding a similar option to addon-docs would allow a user-level fix, by adding v2 to yarn resolutions + overriding the config with v2. It would be more robust to future updates and gives you more time to actually update to v2.

Edit: ok there is at least a Manual configuration documented here: https://www.npmjs.com/package/@storybook/addon-docs. I also see sourceLoaderOptions, I think a mdxLoader option could be useful?

Edit2: hmm couldn't make it work at this point, here's the branch where I tested: https://github.com/VulcanJS/vulcan-npm/tree/feature/mdx2 (also in "starters/next", I have 2 sb config, see the latest commit for more info)

[nickpresta]

I would love to see support for an mdxLoader (or similar). Specifically, I need to add the GitHub Flavored Markdown plugin and it seems like the only real way to do that is via options passed to the compiler.

Right now, without this plugin, things like markdown tables are not supported:

Another option would be for Storybook to add a set of plugins automatically such that files are parsed closer to MDXv1 in functionality (e.g. auto-linking, tables) but I suspect this isn't ideal as it changes the default in Storybook to be different than the default of MDXv2.

[shilman]

@nickpresta we're switching to a new model in Storybook7 where you can use a standard MDX loader instead of Storybook's custom one. I'll write about that soon as an RFC, so please keep your eyes peeled

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).