MDX integration causes build error

Description

When following the Documentation steps in Design Systems for Developers, I came across a build error with @babel/parser when I changed the config to import the new mdx file Avatar.stories.mdx

Via the instructions here, adding babel-loader as a dev dependency seems to solve the issue. Not sure if this is 100% needed but I wasn’t able to get it working without it.

Error

Proposed Change

Add yarn add -D babel-loader as a step when integrating MDX.

[grahamcrackers]

I was going through this tutorial last night and I just wanted to confirm that adding the following snippet did allow mdx to work for me.

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
    },
  },
];

[horacioh]

the problem here is solved if you set some options on .storybook/presets.js file: https://github.com/storybookjs/storybook/blob/master/addons/docs/README.md#preset-options

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {},
      sourceLoaderOptions: null,
    },
  },
];

working on a PR to add this to the docs 😃