Certain globs not finding stories

[matt-tingen]

Describe the bug
While updating from 6.3.6 to 6.4.4, we found that certain globs provided to stories no longer work. Specifically, we use globs like to following based on whether we want all stories from our monorepo or only those from a single packages:

• ../../../packages/*/{src,stories}/**/*.stories.{js,jsx,ts,tsx}
• ../../../packages/foo-bar/{src,stories}/**/*.stories.{js,jsx,ts,tsx}

(we resolve these to be absolute, but it doesn't seem to matter in the repro repo)

After updating, the former (with *) works as expected, but the more specific (with foo-bar) fails to find any stories despite there being some.

To Reproduce
https://github.com/matt-tingen/storybook-glob-repro

System

Environment Info:

  System:
    OS: macOS 11.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.17.3 - ~/.nodenv/versions/14.17.3/bin/node
    Yarn: 3.1.1 - ~/.nodenv/versions/14.17.3/bin/yarn
    npm: 6.14.13 - ~/.nodenv/versions/14.17.3/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 94.0.2
    Safari: 15.0
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.1 => 6.5.0-alpha.1 
    @storybook/addon-docs: ^6.5.0-alpha.1 => 6.5.0-alpha.1 
    @storybook/addon-essentials: ^6.5.0-alpha.1 => 6.5.0-alpha.1 
    @storybook/addon-links: ^6.5.0-alpha.1 => 6.5.0-alpha.1 
    @storybook/react: ^6.5.0-alpha.1 => 6.5.0-alpha.1 

Additional context
We don't use this glob, but while debugging, I found that ../../../packages/foo-bar/src/**/*.stories.{js,jsx,ts,tsx} also works so it seems like it's the combination of foo-bar and {src,stories} that fails.

[RobHannay]

We've had a similar problem.

We used to use (<= 6.3) this

  stories: ["../@(src|docs)/**/*.stories.@(tsx|mdx)"],

but now, on 6.4.9, it fails to find any matching stories.

We get the following message in the sidebar.

Oh no! Your Storybook is empty. Possible reasons why:

• The glob specified in main.js isn't correct.
• No stories are defined in your story files.

The @(src|docs) path segment appears to be the problem because all of the following work and find some stories:

../**/*.stories.@(tsx|mdx)
../src/**/*.stories.@(tsx|mdx)
../docs/**/*.stories.@(tsx|mdx)

There are zero build warnings logged. The only error in the console is specifically the one saying that it can't find the matching story, either "*" if there has yet to be one set in a query param, or the name of the story if navigating directly to one.

For example:

Thanks for all the stuff you do

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

[cgatian]

This is a problem

[tmeasday]

Apologies about the delay, here is the fix: #17252

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.19 containing PR #17252 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.14 containing PR #17252 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[andrewplummer]

Hello, thanks for the fix. However I'm still seeing issues with this:

  stories: [
    '../src/**/*stor(y|ies).@(js|jsx|mdx)',
    '../src/**/*page.@(js|jsx|mdx)',
  ],

with file structure:

src/intro.page.mdx
src/concepts.story.mdx

concepts.story.mdx is loading however intro.page.mdx is not. I am expecting the above globs to match all of:

src/page.mdx
src/intro.page.mdx
src/story.mdx
src/stories.mdx
src/intro.story.mdx
src/intro.stories.mdx
src/component/story.mdx
src/component/page.mdx
src/component/intro.story.mdx
src/component/intro.page.mdx

Am I missing something?

[tmeasday]

@andrewplummer hmm, no obvious reason why one would work but not the other. Can you create a reproduction?

[andrewplummer]

Sure, I added one here: https://github.com/andrewplummer/storybook-test

module.exports = {
  stories: [
    '**.*',
    '**.*.mdx',
    '**.*stor(y|ies).mdx',
    '**.*stor(y|ies).mdx',
    '../src/**/*stor(y|ies).@(js|mdx)',
    '../src/**/*.stories.@(js|mdx)',
    '../src/**/*.page.@(js|mdx)',
    '../**/*stor(y|ies).@(js|mdx)',
    '../**/*.stories.@(js|mdx)',
    '../**/*.page.@(js|mdx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
};

I would expect any one of these globs to match yet none of them do.

[tmeasday]

Hey @andrewplummer I can see two things wrong here.

1. You need to use <Meta/> in your MDX files, even if they have no stories.
2. Also, they need to be called .stories.mdx (unless you mess with Webpack). This is likely the issue. See: https://storybook.js.org/docs/react/api/mdx#mdx-file-names

[andrewplummer]

I see the problem now. However it's all quite confusing isn't it?

I'm not sure I understand the point of globs named stories if it's only going to find files actually called *.stories.mdx. I would expect anything I explicitly mark as being a story to load. Then of course it woudn't know the page title as Meta wasn't there so an error could be thrown, that would have made it quite obvious.

As it is you would have to have read the entire docs (down to the bottom paragraph) to know what's going on.

[tmeasday]

Yeah, we need to process the MDX file in a special way which requires Webpack to know about the location of all "mdx story" files. I agree it's an annoying and arbitrary restriction and we'll probably try to get rid of it in the future.

[andrewplummer]

I mean... fair enough if it's a hard restriction then I get it but what is the point then of having globs? Aren't the globs what is pointing at the mdx story files? I feel like I'm missing something.

[tmeasday]

I guess it is a technical limitation @andrewplummer, rather than a product decision. A couple of things that might help:

1. You can use arbitrary globs for story files, the restriction only applies for MDX files.
2. You can use glob patterns for the directory path etc, it is really just a restriction on the file extension of the MDX file.
3. It is possible to override the webpack config to pick up other .mdx file extensions as MDX story files (as opposed to other MDX files you may be using in your project, which you wouldn't want to treat as story files). This is a bit complicated, and I think in general users have decided it is not worth the hassle, which is why it isn't even documented how to do that.

Technically we could probably automatically do 3, based on detecting that you've used a non-standard mdx-matching glob for your stories field, but that'd be very complex and I suspect error prone, and honestly I'm not sure it is worth it.

What is probably a good idea is that we could log an error or a warning if you write a stories glob that matches mdx files without the .stories.mdx extension, and point people at the docs.

[andrewplummer]

Ah I see so basically the globs work with mdx files but with some restrictions.
I really feel that all of that (except #3) needs to be in the docs.

[tmeasday]

Always open for documentation improvement PRs!

[clintandrewhall]

I spent a day digging into code before I was able to find this issue. 😭