storybook: MDX Docs doesn't display after upgrades to React v18.1.0 + Storybook v6.5.6 -> v6.5.7 -> v6.5.8 -> v6.5.9

Describe the bug I was previously running on React v18 + Storybook v6.4.22, which was working well.

After I initiated the update to React v18.1.0 + Storybook v6.5.6, at first there was an old error of unable to detect @mdx-js/react in the nodes_modules folder, by which I had subsequently installed @mdx-js/react v^2.1.1 + @mdx-js/preact v^2.1.1 which resolved the loading of Storybook in the browser issue.

However, then I did realize that the usual Docs in my .mdx files do not load anymore.

To Reproduce [This is a work-related build, thus I will not be able to showcase all the info]

These are the main related dependencies I’m using: … “next”: “^12.1.6”, “react”: “18.1.0”, “react-dom”: “18.1.0”, … “@mdx-js/preact”: “^2.1.1”, “@mdx-js/react”: “^2.1.1”, “@storybook/addon-actions”: “^6.5.6”, “@storybook/addon-docs”: “^6.5.6”, “@storybook/addon-essentials”: “^6.5.6”, “@storybook/addon-interactions”: “^6.5.6”, “@storybook/addon-links”: “^6.5.6”, “@storybook/addon-postcss”: “^2.0.0”, “@storybook/builder-webpack5”: “^6.5.6”, “@storybook/manager-webpack5”: “^6.5.6”, “@storybook/react”: “^6.5.6”, “@storybook/testing-library”: “^0.0.11”, … “eslint-plugin-storybook”: “^0.5.12”, …

System Environment Info:

System: OS: macOS 12.4 CPU: (8) arm64 Apple M1 Binaries: Node: 18.2.0 - /opt/homebrew/bin/node npm: 8.9.0 - /opt/homebrew/bin/npm Browsers: Chrome: 102.0.5005.61 Firefox: 100.0.2 Safari: 15.5 npmPackages: @storybook/addon-actions: ^6.5.6 => 6.5.6 @storybook/addon-docs: ^6.5.6 => 6.5.6 @storybook/addon-essentials: ^6.5.6 => 6.5.6 @storybook/addon-interactions: ^6.5.6 => 6.5.6 @storybook/addon-links: ^6.5.6 => 6.5.6 @storybook/addon-postcss: ^2.0.0 => 2.0.0 @storybook/builder-webpack5: ^6.5.6 => 6.5.6 @storybook/manager-webpack5: ^6.5.6 => 6.5.6 @storybook/react: ^6.5.6 => 6.5.6 @storybook/testing-library: ^0.0.11 => 0.0.11

Additional context

When running npm run storybook, it loads to the browser and Docs do not load. While accessing Canvas, it throws the following errror:

(0 , _mdx_js_react__WEBPACK_IMPORTED_MODULE_7__.mdx) is not a function
---
TypeError: (0 , _mdx_js_react__WEBPACK_IMPORTED_MODULE_7__.mdx) is not a function
    at Object.Template (http://localhost:6006/main.iframe.bundle.js:8506:76)
    at undecoratedStoryFn (http://localhost:6006/vendors-node_modules_mui_material_Button_Button_js-

If I run npm run build-storybook, it throws a consistent bulk error of: WARN export 'mdx' (imported as 'mdx') was not found in '@mdx-js/react' (possible exports: MDXContext, MDXProvider, useMDXComponents, withMDXComponents)

I’m not sure if the above is related in any way.

Hope to seek guidance and assistance to help restore the Docs view for my .mdx files.

Thank you!

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 14
Comments: 61 (22 by maintainers)

Most upvoted comments

Just sharing a possible alternative solution for those not wanting to / not able to use MDX2.

I encountered almost all the issues in this thread, and what worked for us was essentially forcing Storybook 6.5.x to use MDX1 by declaring @mdx-js/react: ^1.6.22.

Related dependancies:


"dependencies": {
  "next": "^12.1.6",
  "react": "^18.2.0",
  "webpack": "^5.73.0",
  ...
},
"devDependencies": {
  "@mdx-js/react": "^1.6.22",
  "@storybook/addon-a11y": "^6.5.9",
  "@storybook/addon-docs": "^6.5.9",
  "@storybook/addon-essentials": "^6.5.9",
  "@storybook/addon-postcss": "^2.0.0",
  "@storybook/addons": "^6.5.9",
  "@storybook/builder-webpack5": "^6.5.9",
  "@storybook/manager-webpack5": "^6.5.9",
  "@storybook/react": "^6.5.9",
  "@storybook/theming": "^6.5.9",
  ...
},
"resolutions": {
  "@storybook/react/webpack": "^5.73.0",
  ...
}

Hope this helps someone else!

leighnguyen on Jul 6, 2022

@sgrobert Currently MDX1 is the officially supported version in Storybook. MDX2 is experimental. Starting in Storybook 7, MDX2 will be the officially-supported version and MDX1 will no longer be supported. As part of the SB7 release process we will try to provide a mixture of automated and manual migrations to help users upgrade. That work hasn’t started yet, so until then you’ll need to make those changes by hand, or continue to use MDX1 until we provide something to help.

shilman on Jun 20, 2022

@TomFreudenberg you’re very welcome! sorry this was causing problems. hoping we can get to a “just works” state in 7.0 and keep major releases coming more frequently so we can avoid more weird peerDependency hacks in the future

shilman on Oct 26, 2022

@TomFreudenberg If you’re having problems I’d recommend skipping MDX for now. We are making huge improvements to MDX handling in 7.0 and fully switching over to MDX2 as well, so if you’re looking to pick it up, that might be a better time to do it.

shilman on Oct 26, 2022

Hi @leighnguyen,

Thanks for being a lifesaver on this!

Downgraded to the following as recommended, and it works!


"@mdx-js/preact": "^1.6.22",
"@mdx-js/react": "^1.6.22",

Though I do understand from @shilman that the migration to MDX2 will be the next phase for StorybookJS v7.0, hopefully, the CSS plugs get resolved by then!

Thanks @leighnguyen once again for the help!

Closing this thread.

sgrobert on Jul 7, 2022

@sgrobert @dgonzalezr MDX2 support is experimental and we’re still working out the kinks. Thanks for your patience!

I think what’s going on there is that MDX1 allows you to pass in a mapping of elements to the corresponding components, such as:

{
   h1: MyH1Component,
   h2: MyH2Component,
   ...
}

We use this to define the components to render the docs in MDX1. However, it is ignored in MDX2, either by the underlying MDX2 library or by Storybook’s usage of it. I’ll follow up in a separate issue.

shilman on Jun 23, 2022

Looks like I found the issue while trying to build the repro.

It is an HTML comment within the markdown

README.md

# This file will not work

<!-- Because of this comment -->

Test.stories.mdx

import { Meta } from "@storybook/addon-docs";
import Readme from "../README.md";

<Meta title="Just / A /Test" />

<Readme />

which is then reactified via:

.stroybook/main.js (partial)


    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
        sourceLoaderOptions: null,
        transcludeMarkdown: true,
      },
    },

Here’s the very minimal repro: https://github.com/pixelass/sb-repro-mdx

There is only one story and a readme.md that should be rendered.

We used npm since this is how our project is set up but I expect the same issue to occur with yarn.

EDIT: I want to mention that removing the comments from all markdown files is not an option (it is also valid md and therefore should not cause issues)

pixelass on Jun 20, 2022

@sgrobert you’ve discovered a bug in Storybook! 😱

We fixed it here: https://github.com/storybookjs/testing-library/pull/22

Try running npx sb repro again and it should work this time, or simply upgrade @storybook/testing-library to 0.0.13. Thanks for your help & patience!

shilman on Jun 13, 2022

Hi @shilman,

Another update on the issue. Updated to Storybook v6.5.8, the problem still persists.

Seems like the error is now with mdx2-csf. Error is thrown as follows:

99% done plugins webpack-hot-middlewarewebpack built preview 66fbea0cf8acf55bec28 in 10581ms
WARN Force closed manager build
ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Unexpected character `[` (U+005B) in name, expected a name character such as letters, digits, `$`, or `_`; whitespace before attributes; or the end of the tag
    at processResult (/Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:758:19)
at /Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/.../.../.../.../node_modules/@storybook/mdx2-csf/loader.js:26:12)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Unexpected character `[` (U+005B) in name, expected a name character such as letters, digits, `$`, or `_`; whitespace before attributes; or the end of the tag
    at processResult (/Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/.../.../.../.../node_modules/@storybook/mdx2-csf/loader.js:26:12)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Unexpected character `-` (U+002D) before name, expected a character that can start a name, such as a letter, `$`, or `_`
    at processResult (/Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/.../.../.../.../node_modules/@storybook/mdx2-csf/loader.js:26:12)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Hope that may help with further debugging this issue. Thank you.

sgrobert on Jun 10, 2022

@sgrobert Storybook 6.x is still on MDXv1. To use MDXv2, please read the instructions here:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#opt-in-mdx2-support

shilman on Jun 6, 2022