Repository: storybook
Issue: My project can't build .mdx files
Labels: question / support,configuration babel / webpack,mdx

**Describe the bug**
When I try to build a .mdx docs page I get the following error message in the console:
```
WARNING in ./src/stories/text/Text.stories.mdx 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
```

I already tried to add the `@mdx-js/loader` manually, but then I receive this error message:
```
Error: Unexpected default export without title: undefined
    at http://localhost:6006/vendors~main.js:33076:15
    at Array.forEach (<anonymous>)
    at http://localhost:6006/vendors~main.js:33069:11
    at ConfigApi.configure (http://localhost:6006/vendors~main.js:18188:7)
    at Object.configure (http://localhost:6006/vendors~main.js:33217:17)
    at configure (http://localhost:6006/vendors~main.js:34660:24)
    at Object.<anonymous> (http://localhost:6006/main.js:16:36)
    at Object../.storybook/generated-stories-entry.js (http://localhost:6006/main.js:17:30)
    at __webpack_require__ (http://localhost:6006/clientlib-site/runtime~main.js:849:30)
    at fn (http://localhost:6006/clientlib-site/runtime~main.js:151:20)
```
**Note:** The first warning appears when I don't include the `@mdx-js/loader`!

**To Reproduce**
Here are my config files:
**main.js**
```
const webpackConfig = require('../../oegbv-ex-webpack/src/webpack.storybook')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const SOURCE_ROOT = process.cwd() + '/src'

module.exports = {
  "stories": [
    "../src/components/**/*.stories.@(mdx|js|jsx|ts|tsx)",
    "../src/stories/**/*.stories.@(mdx|js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
    "@storybook/addon-essentials",
  ],
  "webpackFinal": (config) => {
    config.plugins.push(new CleanWebpackPlugin())
    config.plugins.push(new MiniCssExtractPlugin({
      filename: 'clientlib-[name]/[name].css'
    }))
    config.plugins.push(new CopyWebpackPlugin({
      patterns: [{ from: path.resolve(process.cwd(), SOURCE_ROOT + '/resources'), to: './clientlib-site' }],
    }))

    return {
      ...config,
      output: {
        ...config.output,
        filename: webpackConfig.output.filename,
        path: webpackConfig.output.path
      },
      module: {
        ...config.module,
        rules: webpackConfig.module.rules
      }
    }
  }
}
```

**webpack.js**
```
'use strict'

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  output: {
    filename: (chunkData) => {
      return chunkData.chunk.name === 'dependencies' ? 'clientlib-dependencies/[name].js' : 'clientlib-site/[name].js'
    },
    path: path.resolve(process.cwd(), './dist'),
  },
  module: {
    rules: [
      /**
       * ESLINT
       * First, run the linter.
       * It's important to do this before Babel processes the JS.
       * Only testing .ts and .tsx files (React code)
       */
      {
        test: /\.(ts|tsx)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              eslintPath: require.resolve('eslint'),
            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        exclude: /node_modules\/(?!(oegbv-ex-components)\/).*/,
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              compilerOptions: {
                noEmit: false,
              },
            },
          },
          {
            loader: 'webpack-import-glob-loader',
            options: {
              url: false,
            },
          },
        ],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: true,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: [
                require("postcss-import"),
                require("tailwindcss"),
                require("autoprefixer")
              ]
            }
          },
          {
            loader: 'webpack-import-glob-loader',
            options: {
              url: false,
            },
          },
        ],
      },
    ],
  },
}
```

**Text.stories.mdx**
```
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
import { Text } from './Text'

<Meta title="MDX/Text" component={Text} />

# Text

With `MDX` we can define a story for `Text` right in the middle of our
Markdown documentation.

export const Template = (args) => <Text {...args} />

<Canvas>
  <Story
    name="Default"
    args={{
      text: 'The quick brown fox jumps over a lazy dog',
      textSize: 'default',
      fontFamily: 'Raleway',
      fontWeight: 'normal',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
```
**Expected behavior**
Storybook should run correctly without any errors

**System:**

_Environment Info:_
  System:
    OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (4) x64 Intel Xeon Processor (Skylake, IBRS)

  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm

  npmPackages:
    @storybook/addon-actions: ^6.0.21 => 6.0.21
    @storybook/addon-docs: ^6.0.21 => 6.0.21
    @storybook/addon-essentials: ^6.0.21 => 6.0.21
    @storybook/addon-links: ^6.0.21 => 6.0.21
    @storybook/react: ^6.0.21 => 6.0.21