Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Importing default and named exports into .mdx files crashes the app #21

Open
morleytatro opened this issue Oct 24, 2022 · 1 comment
Open

Comments

@morleytatro
Copy link

Describe the bug
When importing both default and named exports into an mdx file, an error is produced, crashing the app. The app in question has previewMdx2 set to true.

To Reproduce
Steps to reproduce the behavior:

  1. Create a Component.stories.tsx file with a default export with meta args:
export default {
  title: 'My Title',
  component: Component,
};
  1. Create a Component.stories.mdx file which imports both the meta args and the stories:
import metaArgs, * as stories from './Component.stories';

<Meta {...args} />

Expected behavior
I'm expecting this to work, as it's valid JS import syntax:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#syntax

Screenshots

Extraction error on src/components/pills/Pill/Pill.stories.mdx: TypeError: Cannot read properties of undefined (reading 'name')
/Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/@storybook/mdx1-csf/dist/cjs/sb-mdx-plugin.js:38
  const attr = elt.attributes.find(n => n.name.name === what);
                              ^
TypeError: Cannot read properties of undefined (reading 'name')
    at /Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/@storybook/mdx1-csf/dist/cjs/sb-mdx-plugin.js:38:48
    at Array.find (<anonymous>)
    at getAttr (/Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/@storybook/mdx1-csf/dist/cjs/sb-mdx-plugin.js:38:31)
    at genMeta (/Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/@storybook/mdx1-csf/dist/cjs/sb-mdx-plugin.js:285:21)
    at getExports (/Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/@storybook/mdx1-csf/dist/cjs/sb-mdx-plugin.js:382:15)
    at /Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/@storybook/mdx1-csf/dist/cjs/sb-mdx-plugin.js:506:21
    at Array.forEach (<anonymous>)
    at extractExports (/Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/@storybook/mdx1-csf/dist/cjs/sb-mdx-plugin.js:505:17)
    at Compiler (/Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/@storybook/mdx1-csf/dist/cjs/sb-mdx-plugin.js:551:29)
    at Function.stringify (/Users/morleytatro/Documents/worktrees/gui-webpack-cypress-percy-upgrades/node_modules/unified/index.js:354:12)

Additional context
Please let me know if this should be moved to the other repo, as I noticed the error is coming from @storybook/mdx1-csf despite turning on the preview.

@dawsonbooth
Copy link

I was running into this same issue and found it was caused by the {...args} destructure. The fix was to use the of and story props according to this section the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants