使用Storybook来渲染Theme UI组件时，报错

bash
pragma and pragmaFrag cannot be set when runtime is automatic

React 17支持新的JSX转换，

jsx
function App() {
  return <h1>Hello World</h1>;
}

jsx
// 由编译器引入（禁止自己引入！）
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

但是转换本身需要Babel 的 v7.9.0 及以上版本

jsx
// 如果你使用的是 @babel/preset-react
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

// 如果你使用的是 @babel/plugin-transform-react-jsx
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

使用了"runtime": "automatic"，在emotion中就不能再以这种方式写了

jsx
/** @jsx jsx */

Storybook使用的Babel新的版本，并且配置了"runtime": "automatic"

jsx
export async function babelDefault(config: TransformOptions) {
  const presetReactOptions = hasJsxRuntime() ? { runtime: 'automatic' } : {};
  return {
    ...config,
    presets: [
      ...config.presets,
      [require.resolve('@babel/preset-react'), presetReactOptions],
      require.resolve('@babel/preset-flow'),
    ],
    plugins: [...(config.plugins || []), require.resolve('babel-plugin-add-react-displayname')],
  };
}

支持新转换的 React 版本（React 17 的 RC 版本 及更高版本支持它，但是我们也发布了 React 16.14.0，React 15.7.0 以及 0.14.10 等主要版本，以供还在使用旧版本的开发者使用它们）。而我

正好用的16.14.0

因此有下面的选择

• 在组件中加入

  jsx
  /** @jsxRuntime classic */

• 修改"runtime": "automatic" 为"runtime": "classic"
• 降级React 为 16.12.0
• 删除jsx注解，使用@emotion/babel-plugin-jsx-pragmatic

  jsx
  babel: async options => ({
      ...options,
      presets: [
        ...options.presets,
        [
          '@emotion/babel-plugin-jsx-pragmatic',
          {
            module: 'theme-ui',
            import: 'jsx',
            export: 'jsx',
          },
        ],
      ],
    }),

参考：

[1]: https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html