storybookjs/mdx2-csf

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

morleytatro opened this issue · 1 comments

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.

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