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

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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 24 (9 by maintainers)

Most upvoted comments

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.

shilman on Feb 20, 2020

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.

rtturner on May 27, 2021

@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$/;

Prior99 on Jan 26, 2021

I feel we can try to do this for 6.1

ndelangen on May 11, 2020

@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 on May 11, 2020