描述问题

在为一家大型企业开发Storybook应用时，我们试图从Storybook v6升级到v7。我已经在迁移之前去掉了旧的addon-knobs库，转而使用@storybook/addon-controls。我遇到的问题是在一个特定的故事文件中，我无法弄清楚发生了什么。当我不在main.js中的addons数组里添加@storybook/addon-controls时，故事工作得很好。但是一旦添加了它，我就看到了关于Modal is undefined和Modal组件的一些错误，因为它们甚至没有在我的故事中导入。我注意到，对于一些损坏的故事，我可以通过将某些barrel导入(使用index.js文件重新导出模块)转换为从每个单独的模块中导入来修复它们。
我现在完全搞不清楚问题出在哪里。我已经尝试降级到Storybook的早期次要版本，切换到@storybook/addon-essentials - 但我就是弄不明白问题到底出在哪里。
这是storybook/main.js:

const path = require('path');

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

const pkg = require('../../package.json');

// actions, backgrounds, docs, viewport, toolbars, measure, outline, and highlight
module.exports = {
  stories: ['../../src/**/*.stories.@(ts|js|tsx)'],

  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // {
    //   name: '@storybook/addon-essentials',
    //   options: {
    //     // controls: false,
    //     // docs: true,
    //     toolbars: false,
    //     measure: false,
    //     outline: false,
    //     highlight: false,
    //   },
    // },
  ],

  docs: {
    autodocs: false, // TODO: Do we need this for now?
  },

  framework: {
    name: '@storybook/nextjs',
    options: {},
  },

  webpackFinal: async (config) => {
    config.plugins.push(
      new VanillaExtractPlugin({
        identifiers: 'short',
      })
    );
    config.plugins.push(new MiniCssExtractPlugin({}));
    config.module.rules.push({
      test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract\
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: require.resolve('css-loader'),
          options: {
            url: false, // Required as image imports should be handled via JS/TS import statements
          },
        },
      ],
    });

    const nonVanillaExtractCSSRuleIdx = config.module.rules.findIndex(
      (r) => r?.test?.toString?.() === '/\\.css$/'
    );

    // eslint-disable-next-line no-param-reassign
    config.module.rules[nonVanillaExtractCSSRuleIdx].exclude = [
      config.module.rules[nonVanillaExtractCSSRuleIdx].exclude,
      /\.vanilla\.css$/i,
    ];

    config.plugins.push(
      new webpack.DefinePlugin({
        __APP_NAME__: JSON.stringify(pkg.name),
        __APP_VERSION__: JSON.stringify(pkg.version),
        'global.window.COMMITHASH': JSON.stringify(
          process.env.GIT_SHA || 'no-build-number'
        ),
      })
    );

    return config;
  },

  core: {},
};

重现问题

由于这个仓库是为我的工作而创建的，所以我不能分享它 - 但希望这只是一个与@storybook/addon-controls相关的问题

系统信息

System:
    OS: macOS 14.1.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.1
  npmPackages:
    @storybook/addon-a11y: ~7.6.19 => 7.6.19 
    @storybook/addon-essentials: ~7.6.19 => 7.6.19 
    @storybook/addon-links: ~7.6.19 => 7.6.19 
    @storybook/nextjs: ~7.6.19 => 7.6.19 
    @storybook/preview-api: ~7.6.19 => 7.6.19 
    @storybook/theming: ~7.6.19 => 7.6.19

附加信息

• 无响应*