[Bug]: "You have two component docs pages with the same name" when multiple stories globs match the same component

[yannbf]

Describe the bug

The problem

In Storybook 6, I had a stories field like so:

stories: [
  '../src/docs/Introduction.stories.mdx',
  '../src/docs/*.stories.mdx', // This would also match Introduction.stories.mdx
  '../src/**/*.stories.@(js|jsx|ts|tsx)',
],

Defining ../src/docs/Introduction.stories.mdx’ first in the list would make sure that the Introduction.stories.mdx (“Getting started”) story was always at the top in the sidebar.

The Storybook 7 automigration changed main.js to:

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

However it seems that, for the same scenario where two globs match the same Introduction file, now there are errors in the CLI:

WARN 🚨 You have two component docs pages with the same name Getting Started/With Mealdrop:Docs. Use <Meta of={} name=“Other Name”> to distinguish them.

Note: The same issue happens with the following format:

stories: [
    '../src/docs/Introduction.mdx',
    {
      directory: '../src/docs',
    },
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],

Proposed solution

If we see duplicates coming from the same file path, we can just ignore the second one silently

To Reproduce

On a Storybook 7 project, define the following stories glob:

export default {
  stories: [
    '../**/Introduction.mdx',
    '../**.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)',
  ]
}

System

No response

Additional context

No response

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.62 containing PR #21403 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease