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[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!

[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

[ghost]

I have the same problem, I want to use the exactly same folder structure for my components. Is it possible changing the webpack configuration?

[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!

[zeorin]

I just ran into this.

[ndelangen]

@shilman I think I came up with a solution to this.

I'm thinking we convert the glob patterns specified in main.js.stories and apply that to the includes for the storybook mdx loader.

And add it to the excludes for the other mdx loader?

[ndelangen]

I feel we can try to do this for 6.1

[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!

[frebro]

I also just ran into this when trying to name a story with just .mdx instead of .stories.mdx. I'm doing a component library in Vue with this file structure:

- components
  - button
      button.vue
      button.mdx

Currently I'm forced to name story files button.stories.mdx to avoid the "Unexpected default export without title: undefined" error.

[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!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[anicholls]

I just ran into this as well. Definitely still a bug and this issue should be reopened! Guess I'll go ahead and rename all of my story files...

[Prior99]

I just ran into this as well and it is really confusing as this is documented in a confusing way. I am sure that this issue should be re-opened.

[Prior99]

@anicholls you can use this as a temporary workaround:

This can be used as a temporary workaround in your webpack config:

    config.module.rules = config.module.rules.filter(rule => !rule.exclude?.exec("example.stories.mdx"));
    config.module.rules.find(rule => rule.test.exec("example.stories.mdx")).test = /\.mdx$/;

[rtturner]

Would be awesome to be able to have different patterns. My use case is having designer specific documentation living alongside the story documentation.

This second mdx file doesn't actually include any stories in it so being able to name it Component.design.mdx to live alongside Component.stories.mdx would be great.

[Enteleform]

I'm running into this same issue with @storybook/addon-svelte-csf if I try to set the glob pattern to "../src/**/__Stories__.svelte"

[shilman]

Converting this to a discussion. We’re reserving feature issues for things that are on our short-term roadmap. We’ll check back periodically to see whether this is a good candidate to be added. If this feature would be useful to you, please upvote!