[Bug]: Error when importing component from mdx: Unexpected dependency: false

[viveleroi]

Describe the bug

In sb 7 alpha 50, I am trying to use the documented example of ArgsTable in an mdx file. It causes an error in the console.

WARN 🚨 Extraction error on app\components\buttons\buttons.docs.mdx: Error: Unexpected dependency: false

To Reproduce

The reproduction command seems to fail on my system or terminal. 

My MDX file looks like this:


import { ArgsTable } from '@storybook/addon-docs'
import { Button } from './buttons'

<ArgsTable of={Button} />

My button component looks like this:

export interface ButtonProps {
  title: string
}

export const Button = ({ title }: ButtonProps): JSX.Element =>
  <button type='button'>{title}</button>

### System

```shell
System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Binaries:
    Node: 18.9.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.4 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (107.0.1418.35)
  npmPackages:
    @storybook/addon-docs: 7.0.0-alpha.50 => 7.0.0-alpha.50
    @storybook/addon-essentials: 7.0.0-alpha.50 => 7.0.0-alpha.50
    @storybook/addon-interactions: 7.0.0-alpha.50 => 7.0.0-alpha.50
    @storybook/addon-links: 7.0.0-alpha.50 => 7.0.0-alpha.50
    @storybook/react: 7.0.0-alpha.50 => 7.0.0-alpha.50
    @storybook/react-vite: 7.0.0-alpha.50 => 7.0.0-alpha.50
    @storybook/testing-library: 0.0.13 => 0.0.13

Additional context

No response

[ianwensink]

Did you manage to get this working? I have the exact same setup as you, where Storybook breaks as soon as I import my Button component to show the args table. I did have it working for a brief minute, but it broke when I restarted Storybook.

Edit:
This is what I ran into when debugging the line that throws this exception:

{
  fileName: '/Users/xxx/src/components/button/index.mdx',
  cache4: {
    '/Users/xxx/src/components/button/index.mdx': false
  }
}

[viveleroi]

It was fixed in a newer release, I'm currently on beta 12. Here's what my mdx file looks like

import * as ButtonStories from './buttons.stories'
import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks'

<Meta of={ButtonStories} />

# Demo DocsPage with custom `MDX` content

## Button

There are multiple variations of button.

<ArgsTable of={ButtonStories.meta} />

### Accented - Primary

<Canvas>
  <Story of={ButtonStories.Primary} />
  <Story of={ButtonStories.Warning} />
</Canvas>

[ianwensink]

Awesome! This detail is exactly what I didn't find in the docs: <ArgsTable of={ButtonStories.Meta} />. I thought you had to import the Button and then add that one, but it should be the Meta of the stories file.

Thank you 🙌

[jnschrag]

Responding to this because I'm still getting this error on the most recent beta-36.

I've made a reproduction repo where this occurs with the out of the box Button component and a Button.mdx file.

[herzaso]

Also happens in beta-38. @ianwensink is it working for you? Can you share exactly what you did?

[shilman]

Thank you @jnschrag ! I'm not sure this is the same bug as what others are seeing, but I believe your repro will be fixed by #20809 which I'll merge and release now.

[shilman]

@jnschrag I tested your repro on the latest prerelease and it appears to be fixed. Please give it a try!

npx sb@next upgrade --prerelease

[shilman]

I have reproduced this error after renaming Button.stories.mdx to Button.mdx in the following repro:

https://github.com/dev-nicolaos/sb-bug-repro

This is due to an incorrect value of <Meta of={Button} /> instead of <Meta of={stories} />

[shilman]

Changing this to a documentation issue. We need to catch this error and provide a more useful error message.

Will handle as part of #20496 to reduce the number of issues.

[Yonben]

@shilman While in their specific case the issue is closed, in my case I want to add my own component after the story, using the original component the story use, and I'm getting this error... Here is a repro: https://codesandbox.io/p/sandbox/romantic-shockley-ghnrvc

Thanks ✨

[renrizzolo]

I was able to fix this error by adding the extension when importing a component in the mdx file:

from
import Button from './';
to
import Button from './index.jsx';

@Yonben https://codesandbox.io/p/sandbox/strange-murdock-rs60pn

[Yonben]

Thanks for your comment @renrizzolo . What you found is a workaround though, not a fix. After talking with the SB team a more specific bug was open for that issue.
You can follow it here #20958 :)