Repository: storybook
Issue: [Bug]: Presumably a JSX parsing error on .mdx files (beta.32)
Labels: bug,needs triage

### Describe the bug

Presumably a JSX parsing error on .mdx files, even though by default babel-react is used, right?

Under ../src, stories.tsx work fine but the .mdx ones don't compile as shown below:

```
Found existing addon {"name":"@storybook/addon-docs","options":{"jsxOptions":{"runtime":"automatic","importSource":"@mdx-js/react"}}}, skipping.
/Users/%/dev/%/node_modules/webpack/lib/NormalModule.js:976
                                const error = new ModuleParseError(source, e, loaders, this.type);
                                              ^

ModuleParseError: Module parse failed: Unexpected token (42:14)
File was processed with these loaders:
 * ./node_modules/@storybook/mdx2-csf/loader.js
You may need an additional loader to handle the result of these loaders.
| componentMeta.parameters.docs = {
|   ...(componentMeta.parameters.docs || {}),
>   page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentAnnotations={componentMeta}><MDXContent /></AddContext>,
| };
```

The only mdx file I have is super simple, for testing:

```jsx
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { AlertInline } from '.';

<Meta title='AlertInline' component={AlertInline} />
```

I logged the compiling result:

```jsx
import React from 'react';

/*@jsxRuntime automatic @jsxImportSource react*/
import { assertIsFn, AddContext } from "@storybook/addon-docs";
import {jsxDEV as _jsxDEV} from "react/jsx-dev-runtime";
import {useMDXComponents as _provideComponents} from "@mdx-js/react";
import {Meta, Story, ArgsTable} from '@storybook/addon-docs';
import {AlertInline} from '.';
function _createMdxContent(props) {
  return _jsxDEV(Meta, {
    title: "AlertInline",
    component: AlertInline
  }, undefined, false, {
    fileName: "<source.js>",
    lineNumber: 6,
    columnNumber: 1
  }, this);
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsxDEV(MDXLayout, Object.assign({}, props, {
    children: _jsxDEV(_createMdxContent, props, undefined, false, {
      fileName: "<source.js>"
    }, this)
  }), undefined, false, {
    fileName: "<source.js>"
  }, this) : _createMdxContent(props);
}
// =========
export const __page = () => { throw new Error("Docs-only story"); };

__page.parameters = { docsOnly: true };

const componentMeta = { title: 'AlertInline', component: AlertInline, includeStories: ["__page"],  };

const mdxStoryNameToKey = {};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  ...(componentMeta.parameters.docs || {}),
  page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentAnnotations={componentMeta}><MDXContent /></AddContext>,
};

export default componentMeta;
```

### To Reproduce

```shell
// storybook/main.ts

import {StorybookConfig} from '@storybook/react-webpack5';
import {PropItem} from 'react-docgen-typescript';

const config: StorybookConfig = {
    framework: '@storybook/react-webpack5',
    core: {
        builder: '@storybook/builder-webpack5',
        disableTelemetry: true
    },
    typescript: {
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
            tsconfigPath: new URL('tsconfig.json', import.meta.url).pathname,
            savePropValueAsString: true,
            // Do not show additional props from styled-components, React, etc in the Props table
            // Waiting to be handled automatically by Storybook: https://github.com/storybookjs/storybook/issues/8781
            propFilter: (props: PropItem) =>
                Boolean(props && props.parent && !props.parent.fileName.includes('/node_modules/'))
        }
    },
    stories: [{directory: '../src'}],
    addons: [
        {
            name: '@storybook/addon-docs',
            options: {
                // configureJSX: true,
                jsxOptions: {runtime: 'automatic'}
                // sourceLoaderOptions: null,
                // transcludeMarkdown: true
            }
        },
        {
            name: '@storybook/addon-essentials',
            options: {
                measure: false,
                viewport: false
            }
        },
        {
            name: 'storybook-addon-designs',
            options: {
                renderTarget: 'tab'
            }
        }
    ],
    staticDirs: ['./static']
};

export default config;
```


### System

```
System:
    OS: macOS 12.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 8.6.0 - ~/dev/web-design-library/node_modules/.bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 106.0.5
    Safari: 16.0
  npmPackages:
    @storybook/addon-docs: 7.0.0-beta.35 => 7.0.0-beta.35 
    @storybook/addon-essentials: 7.0.0-beta.35 => 7.0.0-beta.35 
    @storybook/builder-webpack5: 7.0.0-beta.35 => 7.0.0-beta.35 
    @storybook/cli: 7.0.0-beta.35 => 7.0.0-beta.35 
    @storybook/react: 7.0.0-beta.35 => 7.0.0-beta.35 
    @storybook/react-webpack5: 7.0.0-beta.35 => 7.0.0-beta.35 
```

### Additional context

_No response_