You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

执行npm run storybook build时出现TypeError循环结构转JSON错误

Storybook构建报错:TypeError: Converting circular structure to JSON!

执行npm run storybook build时触发如下错误:

TypeError: Converting circular structure to JSON!

开发模式执行npm run storybook dev -p 6008可正常运行,仅构建生产版本时出现该问题。已排查所有stories代码,未发现类似如下的循环引用结构:

var a = {};
a.b = a;

依赖信息(package.json devDependencies)

"devDependencies": {
  "@storybook/addon-a11y": "^7.2.1",
  "@storybook/addon-actions": "^7.2.1",
  "@storybook/addon-controls": "^7.2.1",
  "@storybook/addon-essentials": "^7.2.1",
  "@storybook/addon-interactions": "^7.2.1",
  "@storybook/addon-jest": "^7.2.1",
  "@storybook/addon-links": "^7.2.1",
  "@storybook/addon-mdx-gfm": "^7.2.1",
  "@storybook/addon-toolbars": "^7.2.1",
  "@storybook/addon-viewport": "^7.2.1",
  "@storybook/addons": "^6.5.16",
  "@storybook/blocks": "^7.0.20",
  "@storybook/cli": "^7.2.1",
  "@storybook/jest": "^0.1.0",
  "@storybook/react": "^7.2.1",
  "@storybook/react-webpack5": "^7.2.1",
  "@storybook/source-loader": "^7.2.1",
  "@storybook/test-runner": "^0.10.0",
  "@storybook/testing-library": "^0.0.14-next.2",
  "@storybook/testing-react": "^2.0.1"
}

.storybook/main.js配置

const config = {
  stories: [...myPatterns],
  addons: [
    '@storybook/react',
    '@storybook/addon-a11y',
    'storybook-source-link',
    '@storybook/addon-jest',
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@storybook/addon-toolbars',
    '@storybook/addon-viewport',
    '@storybook/addon-controls',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  async webpackFinal(config, { configType }) {
    if (configType === 'DEVELOPMENT') {
      // 开发环境配置修改
      config.module.rules.push(
        {
          test: /\.scss$/,
          exclude: /\.lazy\.scss$/,
          use: [
            {
              loader: 'style-loader',
              options: { injectType: 'styleTag' },
            },
            'css-loader',
            'sass-loader',
          ],
        },
        {
          test: /\.lazy\.scss$/,
          use: [
            {
              loader: 'style-loader',
              options: { injectType: 'lazyStyleTag' },
            },
            'css-loader',
            'sass-loader',
          ],
        }
      );
    }
    if (configType === 'PRODUCTION') {
      // 生产环境配置修改
    }
    return config;
  },
};
export default config;

环境版本

  • Node: 18.13.0
  • npm: 8.19.3
  • Storybook: 7.2.1

内容的提问来源于stack exchange,提问作者rezaelahi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.13 18:05:56