如何修复Storybook组件示例无限重新加载问题？

将Storybook从6版本升级到7版本后，打开React组件文档时，组件示例出现无限重新加载的情况，无法正常查看代码示例。

我的配置信息 #

依赖版本 #

{
  "@storybook/addon-actions": "^7.4.6",
  "@storybook/addon-essentials": "^7.4.6",
  "@storybook/addon-interactions": "^7.4.6",
  "@storybook/addon-links": "^7.4.6",
  "@storybook/addon-mdx-gfm": "^7.4.6",
  "@storybook/node-logger": "^7.4.6",
  "@storybook/preset-create-react-app": "^7.4.6",
  "@storybook/react": "^7.4.6",
  "@storybook/react-webpack5": "^7.4.6"
}

main.js 配置 #

const webpack = require('webpack');
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    'storybook-react-i18next',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
    '@storybook/addon-mdx-gfm',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  webpackFinal: (config) => {
    config.resolve.modules.push(process.cwd() + '/node_modules');
    config.resolve.modules.push(process.cwd() + '/src');

    // this is needed for working w/ linked folders
    config.resolve.symlinks = false;
    config.plugins.push(
      // Removing Speedy so the static storybook styling doesn't break
      new webpack.DefinePlugin({
        SC_DISABLE_SPEEDY: true,
      })
    );
    return config;
  },
  docs: {
    autodocs: true,
  },
};

preview.js 配置 #

import '../src/core/ui/styles/reset.css';
import i18n from './i18n';

export const parameters = {
  i18n,
  locale: 'en',
  locales: {
    ru: 'Russian',
    en: 'English',
  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  backgrounds: {
    default: 'light',
    values: [
      {
        name: 'light',
        value: '#F4F4F8',
      },
      {
        name: 'dark',
        value: '#1B2431',
      },
      {
        name: 'gray',
        value: '#E5E5E5',
      },
    ],
  },
};

可能的解决方向 #

1. 排查 storybook-react-i18next 兼容性 #

当前配置中使用的storybook-react-i18next插件可能和Storybook 7存在兼容性冲突，触发无限重渲染。可以先暂时移除该插件验证：

• 在main.js的addons数组中删除'storybook-react-i18next'
• 注释掉preview.js中i18n相关配置
• 重启Storybook查看问题是否消失

如果问题解决，去该插件官方仓库确认是否有适配Storybook 7的版本，或替换为Storybook官方推荐的i18n集成方案。

2. 调整Webpack的symlinks配置 #

你在webpackFinal中设置了config.resolve.symlinks = false，该配置在Storybook 7的Webpack5环境下可能引发模块解析异常，进而导致组件重渲染。尝试注释掉这一行后重启：

// config.resolve.symlinks = false;

3. 关闭Autodocs验证冲突 #

启用autodocs: true后，自动生成的文档可能和现有组件、插件存在冲突。暂时关闭Autodocs测试：

docs: {
  autodocs: false,
},

如果问题消失，可以逐步排查具体是哪个组件的自动文档触发了问题，或升级Storybook到最新稳定版本（7.4.6之后的版本可能修复了相关Bug）。

4. 移除preset-create-react-app #

Storybook 7已不再推荐使用@storybook/preset-create-react-app，建议移除该预设后调整配置：

• 在main.js的addons中删除'@storybook/preset-create-react-app'
• 重启Storybook验证问题是否解决

内容的提问来源于stack exchange，提问作者Tretyakov Pavel