Storybook: [Addon-docs] Invalid hook call error with MDX

[Yama-Tomo]

Describe the bug

Occurs the Invalid hook call error with MDX.

To Reproduce
Steps to reproduce the behavior:

1. clone my sample repo https://github.com/Yama-Tomo/type-checking-MDX-in-storybook
2. run nvm use or use node v12.16.3
3. check out reproduction-invalid-hook-call branch
4. run yarn sb

Screenshots

System:

  System:
    OS: macOS Mojave 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Safari: 12.1
  npmPackages:
    @storybook/addon-docs: ^6.0.0-beta.6 => 6.0.0-beta.6
    @storybook/addon-storyshots: ^6.0.0-beta.6 => 6.0.0-beta.6
    @storybook/addon-storyshots-puppeteer: ^6.0.0-beta.6 => 6.0.0-beta.6
    @storybook/addons: ^6.0.0-beta.6 => 6.0.0-beta.6
    @storybook/cli: ^6.0.0-beta.6 => 6.0.0-beta.6
    @storybook/preset-create-react-app: ^2.1.2 => 2.1.2
    @storybook/react: ^6.0.0-beta.6 => 6.0.0-beta.6

Additional context

It works when remove the component prop.

--- a/src/stories/HelloWorld.stories.mdx
+++ b/src/stories/HelloWorld.stories.mdx
@@ -1,7 +1,7 @@
 import { Source, Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
 import HelloWorld from '~/components/HelloWorld';

-<Meta title="example/HelloWorld" component={HelloWorld} />
+<Meta title="example/HelloWorld" />

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[belev]

Hi,

The same error occurs when trying to use any kind of code block. For example having:

function a() {
  console.log(42);
}

is resulting in Invalid hook call error.

React version 16.13.1, Storybook version 5.3.18.

Error stack trace:

<SyntaxHighlighter> component:
    in SyntaxHighlighter
    in Styled(SyntaxHighlighter)
    in Source (created by CodeOrSourceMdx)
    in CodeOrSourceMdx (created by MDXCreateElement)
    in MDXCreateElement (at documentation.story.mdx:214)
    in pre
    in Styled(pre)
    in pre (created by MDXCreateElement)
    in MDXCreateElement (at documentation.story.mdx:214)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (at documentation.story.mdx:25)
    in MDXContent (at documentation.story.mdx:399)
    in AddContext (at documentation.story.mdx:399)
    in page
    in div
    in Styled(div) (created by DocsContainer)
    in div
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)

Any ideas what could be causing this?

[dlvhdr]

This is happening for me as well.
Any chance to investigate it?

For me it seems to be caused by this line:
https://github.com/storybookjs/storybook/blob/6aaa9d4ff70f7e02a048ee8ace7cd23950ad4d11/addons/docs/src/frameworks/react/extractProps.ts#L34

The component I'm passing to Meta is using react hooks, which seems to break when you call the render function of a component like this.

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:2527:528)
    at Object.useContext (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1457:25)
    at useTheme (http://localhost:6006/vendors~main.95791d3cc61255392fd8.bundle.js:23705:60)
    at useStyles (http://localhost:6006/vendors~main.95791d3cc61255392fd8.bundle.js:23312:74)
    at Object.Button [as render] (http://localhost:6006/main.95791d3cc61255392fd8.bundle.js:6033:19)
    at getPropDefs (http://localhost:6006/vendors~main.95791d3cc61255392fd8.bundle.js:32388:38)
    at extractProps (http://localhost:6006/vendors~main.95791d3cc61255392fd8.bundle.js:32418:11)
    at extractArgTypes (http://localhost:6006/vendors~main.95791d3cc61255392fd8.bundle.js:32289:48)
    at enhanceArgTypes (http://localhost:6006/vendors~main.95791d3cc61255392fd8.bundle.js:31959:58)
    at http://localhost:6006/vendors~main.95791d3cc61255392fd8.bundle.js:55670:21

[shilman]

Have y'all tried a recent beta? I think @tooppaaa made some changes to this code

[Yama-Tomo]

ummm... still have error in 6.0.0-beta.23

[tooppaaa]

@shilman Dupe of https://github.com/storybookjs/storybook/issues/10895
There is more info and reproduction on the other issue.
Let's move discussion there ?

[shilman]

Ok, closing this as a dupe of #10895