MDX stories named with a pattern other than *.stories.mdx don't compile correctly

[stevesims]

Describe the bug
I decided that I'd name my storybook files stories.mdx (and have them sit in a directory besides index and test files). Unfortunately doing so results in storybook failing, showing an error that reads Unexpected default export without title: undefined

To Reproduce
Steps to reproduce the behavior:

In .storybook/main.js set up the search path for stories to look for differently named files - in my case this was:

  stories: ['../src/**/(*.stories|stories).(ts|tsx|js|mdx)'],

Then make sure you have a valid stories file named stories.mdx.

Restart storybook and you'll see an error.

(You can try other naming formats too - I've tried replacing stories with a different word, for example, so it would match *.testword.mdx and that results in an identical error.)

Looking at the transpiled output of the mdx files from sources panel in Chrome inspector I can see that the output of a file that is not named following the *.stories.mdx pattern omits everything beyond a line reading MDXContent.isMDXComponent = true; compared to working stories. (An import of assertIsFn and AddContext is also omitted). It is this omission of that code that causes the crash.

It would therefore seem that the transpilation is incomplete.

Expected behavior
The pattern given above should match files following the pattern of both *.stories.mdx and plain stories.mdx, which it does. One would expect mdx stories to be transpiled correctly given the configuration.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Browsers:
    Firefox: 72.0.2
    Safari: 12.1
  npmPackages:
    @storybook/addon-docs: ^5.3.13 => 5.3.13 
    @storybook/addons: ^5.3.13 => 5.3.13 
    @storybook/react: ^5.3.13 => 5.3.13 
    @storybook/storybook-deployer: ^2.8.1 => 2.8.1 

Additional context
Given the configuration above, as my path matching maintains support for the *.stories.mdx pattern if I rename a file from stories.mdx to 0.stories.mdx then it will compile correctly and the error goes away.

[shilman]

I’m a little confused by the issue. Is this a feature request to include stories.mdx in the pattern?

[stevesims]

Sorry I wasn't quite clear enough.

To me the fact that I've specified a different pattern in my config for mdx story files and that pattern isn't being properly recognised feels like a bug.

The request is that the pattern I've provided be respected. 😁

If alternatively there's a different way that I should be specifying the pattern for stories MDX files then that's fair enough - in which case it's a documentation bug.

[shilman]

It’s documented that you should name your MDX story files *.(stories|story).mdx.

It’s a really interesting proposition to use the main.js stories configuration to automatically apply the MDX compiler to those files. That config format didn’t exist when i created the webpack settings for addon-docs, but it’s a pretty cool usage.

@ndelangen any idea about the cleanest way access to this user’s main.js Stories export from within an addon’s webpack preset?

[stevesims]

Thanks for the quick responses.

As a bit more background, I'm building a new component library - and repeating patterns I've used before which have proved useful/sensible. 😁 One pattern I'd used on an earlier project was to make components as self-contained as practical - that meant one folder per component, containing index.js, test.js and stories.js files (we were using Storybook 5.0.3). We found that when the library got quite large having this structure helped a lot, as otherwise locating where test files or story files are gets tricky.

With the new library I'm of course using the latest storybook - and so far it's all been great. Storybook docs using MDX is fantastic and you guys have done brilliant work.

The work-around to name my stories file as something like 0.stories.mdx is OK - it just ends up feeling a bit awkward when looking at my directory structure. 😉

[shilman]

That makes total sense. Our recommended naming convention is Component.x / Component.stories.x. But naming is a personal preference and I can see the merit to Component/(index,stories,test).x

It's an easy change to update the default pattern to support that convention, and I'll probably make that change. cc @tmeasday @ndelangen

But I also really like your suggestion to automatically configure it based on main.js, at least from a developer's standpoint. From a maintainer's standpoint, adding that kind of configurability can lead to headaches long-term, so even if it's technically possible I'm on the fence about adding that.

[stale]

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!

[Pyrolistical]

I'm looking at the internal webpack config and see the following rules

test: /\.(mjs|jsx?)$/, use: [...
test: /\.js$/, use: [...
test: /\.(stories|story).mdx$/, use: [...
test: /\.mdx$/, use: [...
test: /\.(stories|story)\.[tj]sx?$/, use: undefined

can we mirror the mdx to [tj]sx?, because those don't have this problem

[shilman]

@Pyrolistical can you elaborate on that?

[Pyrolistical]

I'm saying this line test: /\.(stories|story)\.[tj]sx?$/, use: undefined, I think is redundant, but basically signals there is no explicating handling of yada.stories.js, and this is why yada/stories.js currently work.

If do the same for mdx, then that will add support for yada/stories.mdx