Merge pull request #11448 from storybookjs/11439-fix-babel-jsx

Addon-docs: Fix babel jsx handling for MDX

MIGRATION.md

@@ -12,6 +12,7 @@
     - [Docs theme separated](#docs-theme-separated)
     - [DocsPage slots removed](#docspage-slots-removed)
     - [React prop tables with Typescript](#react-prop-tables-with-typescript)
+    - [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react)
   - [New addon presets](#new-addon-presets)
   - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
   - [Removed Deprecated APIs](#removed-deprecated-apis)
@@ -295,6 +296,23 @@ Starting in 6.0, we have [zero-config typescript support](#zero-config-typescrip
 
 There are also two typescript handling options that can be set in `.storybook/main.js`. `react-docgen-typescript` (default) and `react-docgen`. This is [discussed in detail in the docs](https://github.com/storybookjs/storybook/blob/next/addons/docs/react/README.md#typescript-props-with-react-docgen).
 
+#### ConfigureJSX true by default in React
+
+In SB 6.0, the Storybook Docs preset option `configureJSX` is now set to `true` for all React projects. It was previously `false` by default for React only in 5.x). This `configureJSX` option adds `@babel/plugin-transform-react-jsx`, to process the output of the MDX compiler, which should be a safe change for all projects.
+
+If you need to restore the old JSX handling behavior, you can configure `.storybook/main.js`:
+
+```js
+module.exports = {
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: { configureJSX: false },
+    },
+  ],
+};
+```
+
 ### New addon presets
 
 In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.

addons/docs/src/frameworks/common/preset.ts

@@ -23,10 +23,11 @@ type BabelParams = {
 };
 function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: BabelParams) {
   const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
-  const plugins = configureJSX
-    ? [...babelPlugins, '@babel/plugin-transform-react-jsx']
-    : babelPlugins;
-
+  const jsxPlugin = [
+    '@babel/plugin-transform-react-jsx',
+    { pragma: 'React.createElement', pragmaFrag: 'React.Fragment' },
+  ];
+  const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
   return {
     // don't use the root babelrc by default (users can override this in mdxBabelOptions)
     babelrc: false,
@@ -47,7 +48,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
   const {
     babelOptions,
     mdxBabelOptions,
-    configureJSX = options.framework !== 'react', // if not user-specified
+    configureJSX = true,
     sourceLoaderOptions = options.framework === 'react' ? null : {},
     transcludeMarkdown = false,
   } = options;