Addon-docs : Source-loader warning when using CSF Stories with MDX Docs

[MatthisLT]

Describe the bug
Source-loader produce warnings in the console when trying to use the following recipe : CSF Stories with MDX Docs.

The warning is raised when using : <Story name="basic">{stories.basic()}</Story>.

To Reproduce

1. Use the recipe above or try with sample files listed below.
2. Run npm run storybook
3. See the story's canvas or doc

Expected behavior
There should be no warning in the console when using this recipe. Or more explication on the expected config in this last.

Screenshots
The resulting warning :

Code snippets
Button.js

import React from 'react';
import PropTypes from 'prop-types';

function Button(props) {
  const {
    control,
    children,
    as: Tagname,
    ...other
  } = props;

  return (
    <Tagname {...other}>
      {children}
    </Tagname>
  );
};

Button.propTypes = {
  as: PropTypes.elementType,
};

Button.defaultProps = {
  as: 'button',
};

export default Button;

Button.stories.js

import React from 'react';

import Button from './Button';

export default {
  title: 'UI/Components/Button',
  component: Button,
  includeStories: [],
};

export const basic = () => <Button>My button</Button>;
basic.story = {};

Button.stories.mdx

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

import Button from './Button';
import * as stories from './Button.stories.js';

<Meta title="UI/Components/Button" Components={Button} />

# Button

I can define a story with the function imported from CSF:

<Preview>
  <Story name="Basic">
    {stories.basic()}
  </Story>
</Preview>

System:

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 8.16.0 - ~/.nvm/versions/node/v8.16.0/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.16.0/bin/npm
  Browsers:
    Chrome: 78.0.3904.97
    Firefox: 70.0.1
    Safari: 13.0.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.0-beta.2 => 5.3.0-beta.2 
    @storybook/addon-docs: ^5.3.0-beta.2 => 5.3.0-beta.2 
    @storybook/addon-knobs: ^5.3.0-beta.2 => 5.3.0-beta.2 
    @storybook/react: ^5.3.0-beta.2 => 5.3.0-beta.2 
    @storybook/source-loader: ^5.3.0-beta.2 => 5.3.0-beta.2 

Additional context
The warning was introduced with PR #8773.

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

[shilman]

@donaldpipowitch what do you think we should do about the warning in this case? I believe this is a valid recipe, but this snippet does NOT pass the context into the story, thus triggering the warning you added:

  <Story name="Basic">
    {stories.basic()}
  </Story>

cc @tmeasday

[tmeasday]

Did we talk about other ways of expressing this? Like

<Story name="Basic" render={stories.basic} />

[donaldpipowitch]

Not sure, I have to look at this. Without the story context the source-loader can't do anything meaningful, right? So maybe excluding the files from the loader would be the best workaround for now. 🤔 Maybe we need a better way to determine what IS a story? So that the loader isn't applied accidentally to non-stories.

[MatthisLT]

I changed the title of the issue because it was misguiding, referencing "CSF with arbitrary MDX" recipe instead of "CSF with MDX Docs" one (as I have played with both).

In my current working case I ended up using arbitrary MDX as it was closer to the goal I wanted to achieve (having stories declared in CSF for development and MDX for custom documentation).

But the issue is still valid as is, in fact there is even more : I've recently update to storybook 5.3.0-rc.11 and now the recipe produce an error (see screenshot below).

If we remove includeStories: [], in Button.stories.js it's working (but still with the warning).

I made a repo for reproduction : https://github.com/MatthisLT/storybook-cases/tree/8885, with installation instructions in the Readme, hope it helps.

[vanessayuenn]

Hi! I am going through and cleaning up old issues in the repo. We just shipped a ton of improvements in Storybook 7.0, and I suspect this bug might be fixed already. Can you please try it out? If this issue persists with the latest version, please open a new bug report with a 7.x reproduction. Thank you so much! 🙏🏼