React项目中Storybook添加JSX全局装饰器时出现SyntaxError问题排查

看起来你的Storybook环境没有正确转译preview.js/preview.jsx里的JSX语法，导致Babel把<div>这类JSX标签识别成了无效的JavaScript语法。下面是一步步的排查和解决方法：

1. 确认文件扩展名 #

你的装饰器代码包含JSX，所以首先要确保文件扩展名是.jsx——把.storybook/preview.js重命名为.storybook/preview.jsx，这样工具链才能识别出文件里包含JSX需要转译。

2. 配置Storybook识别并处理JSX #

在.storybook/main.js中，添加webpack配置以支持JSX文件的转译：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-actions', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    // 新增JSX处理规则
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    });
    return config;
  },
};

3. 检查项目Babel配置 #

确保项目根目录下的babel.config.js（或.babelrc）包含React预设，这是转译JSX的核心：

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
};

如果还没安装相关依赖，先执行安装命令：

npm install --save-dev @babel/preset-react @babel/preset-env babel-loader

4. 清理缓存并重启Storybook #

缓存可能导致配置不生效，执行以下命令清理后重启：

npx storybook clean
npm run storybook

如果以上步骤还没解决问题，可以尝试升级Storybook到最新稳定版（尤其是你的React版本是18+的话，需要Storybook 6.5+的支持）：

npx sb upgrade

内容的提问来源于stack exchange，提问作者AntonioGarcía