配置Storybook webpack兼容CRACO覆写 解决build-storybook构建失败问题

无需引入第三方storybook-preset-craco包，直接在Storybook配置层复用Craco原生暴露的配置生成能力即可兼容，全程只需要修改.storybook/main.js文件，符合项目安全规范要求。

配置修改步骤 #

• 移除原有addons配置中的@storybook/preset-create-react-app项。该预设只会读取原生Create React App的默认webpack配置，无法识别Craco做的覆写，是导致构建失败的核心原因。
• 在配置中引入Craco自身的配置生成方法，在Storybook的webpack构建阶段手动合并Craco处理后的webpack规则，最终配置代码如下：

const { createWebpackDevConfig, createWebpackProdConfig } = require('@craco/craco');
const cracoConfig = require('../craco.config.js');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss",
    "storybook-addon-designs"
  ],
  "framework": "@storybook/react",
  webpackFinal: async (storybookWebpackConfig, { configType }) => {
    // 生成对应环境下经过Craco覆写的CRA webpack配置
    const cracoAdjustedConfig = configType === 'PRODUCTION'
      ? createWebpackProdConfig(cracoConfig)
      : createWebpackDevConfig(cracoConfig);

    // 合并module规则，过滤CRA原生和Storybook默认重复的规则避免冲突
    const conflictRuleTests = [/jsx\|tsx/, /css/, /svg/, /file-loader/];
    const cracoExtraRules = cracoAdjustedConfig.module.rules.filter(rule => {
      const ruleTestStr = rule.test?.toString() || '';
      return !conflictRuleTests.some(conflictReg => conflictReg.test(ruleTestStr));
    });
    storybookWebpackConfig.module.rules.push(...cracoExtraRules);

    // 合并resolve配置（包含路径别名、解析插件等）
    storybookWebpackConfig.resolve = {
      ...storybookWebpackConfig.resolve,
      ...cracoAdjustedConfig.resolve,
      plugins: [
        ...(storybookWebpackConfig.resolve.plugins || []),
        ...(cracoAdjustedConfig.resolve.plugins || [])
      ]
    };

    // 同步Craco中配置的devtool等顶层webpack配置
    if (cracoAdjustedConfig.devtool) {
      storybookWebpackConfig.devtool = cracoAdjustedConfig.devtool;
    }

    // 合并非重复的webpack插件
    const existingPluginNames = storybookWebpackConfig.plugins.map(plugin => plugin.constructor.name);
    const cracoExtraPlugins = cracoAdjustedConfig.plugins.filter(
      plugin => !existingPluginNames.includes(plugin.constructor.name)
    );
    storybookWebpackConfig.plugins.push(...cracoExtraPlugins);

    return storybookWebpackConfig;
  }
}

验证方式 #

配置修改完成后直接执行npm run build-storybook即可正常构建，你在craco.config.js中配置的graphql loader、devtool规则都会自动生效，后续新增Craco配置时也不需要重复修改Storybook配置。

若后续构建过程中出现个别loader重复注册的报错，只需要在上述配置的conflictRuleTests数组中加入对应规则的test匹配正则即可过滤冲突。

内容的提问来源于stack exchange，提问作者Mysterious Shadow