使用Theme-UI的项目集成Storybook 6时遇JSX编译错误求助

问题原因 #

Storybook 6默认启用React 17+的自动JSX runtime（automatic），但Theme-UI依赖经典runtime（classic）下的自定义JSX pragma，两者冲突导致报错。你之前追加@babel/preset-react配置的方式因优先级问题未生效——Storybook自带的React preset会先加载，追加的配置无法覆盖原有设置。

解决步骤 #

1. 修改Storybook已有React preset的runtime配置 #

在.storybook/main.js中，不要追加新的preset，而是直接找到已存在的@babel/preset-react并修改其配置：

module.exports = {
  // 其他Storybook配置...
  babel: async (options) => {
    // 遍历presets，定位并修改React preset
    const updatedPresets = options.presets.map(preset => {
      if (Array.isArray(preset) && preset[0] === '@babel/preset-react') {
        return [
          '@babel/preset-react',
          {
            ...preset[1],
            runtime: 'classic',
            pragma: 'jsx',
            pragmaFrag: 'React.Fragment' // 保证Fragment语法正常工作
          }
        ];
      }
      return preset;
    });

    return {
      ...options,
      presets: updatedPresets
    };
  }
};

2. 避免项目根目录Babel配置干扰 #

如果项目根目录存在babel.config.js或.babelrc，检查是否全局设置了runtime: 'automatic'。可以针对Storybook环境单独切换runtime：

// 项目根目录babel.config.js
module.exports = api => {
  const isStorybook = api.env('storybook');
  return {
    presets: [
      [
        '@babel/preset-react',
        {
          runtime: isStorybook ? 'classic' : 'automatic'
        }
      ]
    ]
  };
};

3. 验证配置并清除缓存 #

重启Storybook服务，确认组件文件中的/** @jsx jsx */ pragma正常工作。若仍有问题，清除Storybook缓存后重试：

npx storybook build --no-cache
# 或手动删除node_modules/.cache/storybook目录

内容的提问来源于stack exchange，提问作者Mohamed Sobhy