title: Storybook + MDX
body: <p>My <code>.js</code> stories show perfectly on storybook but .mdx stories do not show &amp; I get no error as well</p>
  <h2>main.js</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = {
    addons: [
      '@storybook/addon-docs/register',
      '@storybook/addon-actions/register',
      '@storybook/addon-links/register',
      '@storybook/addon-knobs/register',
      '@storybook/addon-storysource/register',
      '@storybook/addon-viewport/register',
    ],
  };</code></pre>
  </div>
  </div>
  </p>
  <h2>webpack.config.js</h2>
  <p>as suggested here <a href="https://www.npmjs.com/package/@storybook/addon-docs#manual-configuration" rel="nofollow noreferrer">https://www.npmjs.com/package/@storybook/addon-docs#manual-configuration</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>config.module.rules.push({
      test: /\.(stories|story)\.mdx?$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-transform-react-jsx'],
          },
        },
        {
          loader: '@mdx-js/loader',
          options: {
            compilers: [createCompiler({})],
          },
        },
      ],
    });
  
    config.module.rules.push({
      test: /\.(stories|story)\.jsx?$/,
      loader: require.resolve('@storybook/source-loader'),
      exclude: [/node_modules/],
      enforce: 'pre',
    });</code></pre>
  </div>
  </div>
  </p>
  <h2>preview.js</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>addParameters({
    docs: {
      container: DocsContainer,
      page: DocsPage,
    },
  });
  
  function loadStories() {
    const requires = [require.context('@rrc', true, /\.stories\.(js|mdx)$/)];
    for (const req of requires) req.keys().forEach(filename =&gt; req(filename));
  }
  configure(loadStories, module);</code></pre>
  </div>
  </div>
  </p>
  <p>Now I have 2 types of stories</p>
  <h2>story.mdx</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Meta, Story } from '@storybook/addon-docs/blocks';
  // Components
  import Chips from '../';
  
  &lt;Meta title="AAAAAAAAA AAAAAA/Chip2" component={Chip} /&gt;
  
  # Chip
  
  I can define a story with the function imported from CSF:
  
  And I can also embed arbitrary markdown &amp; JSX in this file.
  
  &lt;Chip label="Basic" /&gt;
  
  &lt;Preview&gt;
    &lt;Story name="all checkboxes"&gt;
      &lt;form&gt;
        &lt;Chip label="Basic" /&gt;
      &lt;/form&gt;
    &lt;/Story&gt;
  &lt;/Preview&gt;
  
  ### Installing
  
  A step by step series of examples that tell you how to get a development env running</code></pre>
  </div>
  </div>
  </p>
  <p>and <code>.js</code> stories which are like</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { storiesOf } from '@storybook/react';
  import { Chip } from '../../..';
  
  storiesOf('Chip', module)
    .addParameters({
      component: Chip,
    })
    .add('Basic', () =&gt; &lt;Chip label="Basic" /&gt;)
    .add('Disabled', () =&gt; &lt;Chip label="Disabled" disabled /&gt;)</code></pre>
  </div>
  </div>
  </p>