MDX compilation error: Adjacent JSX elements must be wrapped

Describe the bug Trying to compile any component.stories.mdx file in 5.3.18 fails with the following error in build-storybook:

WARN ./src/components/sanitize/sanitize.stories.mdx
WARN Module build failed (from ./node_modules/@mdx-js/loader/index.js):
WARN SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (2:0)
WARN     at Object._raise (/Users/ravi/GitHub/ce-web-components/node_modules/@babel/parser/lib/index.js:723:17)
WARN     at Object.raiseWithData (/Users/ravi/GitHub/ce-web-components/node_modules/@babel/parser/lib/index.js:716:17)

<<< elided a bunch of the stack trace >>>

To Reproduce Steps to reproduce the behavior:

1. Update my build environment as specified here: https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#installation
2. Add a very simple MDX story to one of my components
3. run ./node_module/.bin/build-storybook

Expected behavior The MDX story is added to the storybook

Code snippets My main.js looks like this:

module.exports = {
  addons: [
    "@storybook/addon-notes/register",
    "@storybook/addon-knobs/register",
    "@storybook/addon-actions/register",
    "@storybook/addon-docs/register"
  ],
  stories: ["../src/components/**/*.stories.*"]
};

My webpack.js looks like this:

const fs = require("fs");
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");
const OUTPUT_DIR = path.resolve(__dirname, "../dist");
const PROJECT_NAME = "ce-web-components";
const createCompiler = require("@storybook/addon-docs/mdx-compiler-plugin");

module.exports = async ({ config }) => {
  fs.readdirSync(path.join(OUTPUT_DIR, PROJECT_NAME)).map(file => {
    try {
      const jsFilePath = path.join(
        OUTPUT_DIR,
        `collection/components/${file}/${file}.js`
      );
      if (fs.existsSync(jsFilePath)) {
        config.entry.push(jsFilePath);
      }
    } catch (err) {
      console.error(err);
    }

    try {
      const cssFilePath = path.join(
        OUTPUT_DIR,
        `collection/components/${file}/${file}.css`
      );
      if (fs.existsSync(cssFilePath)) {
        config.entry.push(cssFilePath);
      }
    } catch (err) {
      console.error(err);
    }
  });

  config.plugins.push(
    new CopyPlugin([
      {
        from: "**/*",
        to: "./",
        context: OUTPUT_DIR
      }
    ])
  );

  config.plugins.push(new WriteFilePlugin());

  config.module.rules.push({
    test: /\.(stories|story)\.mdx$/,
    use: [
      {
        loader: "babel-loader",
        // may or may not need this line depending on your app's setup
        options: {
          plugins: ["@babel/plugin-transform-react-jsx"]
        }
      },
      {
        loader: "@mdx-js/loader",
        options: {
          compilers: [createCompiler({})]
        }
      }
    ]
  });
  config.module.rules.push({
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: require.resolve("@storybook/source-loader"),
    exclude: [/node_modules/],
    enforce: "pre"
  });

  return config;
};

I have a .babelrc that looks like this:

{
  "plugins": [
    "@babel/plugin-syntax-jsx",
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]
}

The story I’m compiling - sanitize.stories.mdx looks like this:

import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
<Meta title="MDX/Sanitize" />
<Preview>
  <Story name="sanitize header">
    <ce-sanitize html="<h1>Header</h1>"></ce-sanitize>
  </Story>
</Preview>

System: Environment Info:

System: OS: macOS 10.15.4 CPU: (8) x64 Intel® Core™ i7-7920HQ CPU @ 3.10GHz Binaries: Node: 10.17.0 - /usr/local/bin/node Yarn: 1.2.1 - /usr/local/bin/yarn npm: 6.11.3 - /usr/local/bin/npm Browsers: Chrome: 80.0.3987.163 Firefox: 72.0.1 Safari: 13.1 npmPackages: @storybook/addon-actions: ^5.3.18 => 5.3.18 @storybook/addon-docs: ^5.3.18 => 5.3.18 @storybook/addon-events: ^5.3.18 => 5.3.18 @storybook/addon-knobs: ^5.3.18 => 5.3.18 @storybook/addon-notes: ^5.3.18 => 5.3.18 @storybook/addon-viewport: ^5.3.18 => 5.3.18 @storybook/html: ^5.3.18 => 5.3.18 @storybook/web-components: ^5.3.18 => 5.3.18

Additional context I know JSX files will produce this error since you always need an outer wrapper for HTML elements with those. But that limitation makes no sense for MDX files. Is there a configuration I’m missing somewhere to allow for this?

[coler-j]

The example at docs.stories.mdx is a dead link 😦

[shilman]

I think you just need to add newlines:

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

<Meta title="MDX/Sanitize" />

<Preview>
  <Story name="sanitize header">
    <ce-sanitize html="<h1>Header</h1>"></ce-sanitize>
  </Story>
</Preview>