Storybook启动时不加载stories，修改文件后才正常显示如何解决？

问题根源 #

你的故障是两个核心原因叠加导致：

1. Storybook 6的配置格式错误，自定义webpack规则没有放到指定的webpackFinal字段下，初始构建时未加载你的样式、资源loader，导致模块解析失败；热更新时会重新加载变更模块，反而能正常读取配置，所以修改文件后所有stories正常显示。
2. 依赖不兼容：你使用的extract-text-webpack-plugin是webpack 3专属插件，和你项目中的webpack 5完全不兼容，storybook-addon-specifications仅支持到Storybook 5.x，和6.3.x版本冲突，两者都会导致初始构建时模块导出异常，触发reading 'extend'报错。

解决方案 #

步骤1：修正main.js配置

将所有webpack相关配置移动到webpackFinal字段下，修正后的配置如下：

const path = require("path");
const resolve = uri => path.resolve(__dirname, uri);

module.exports = {
    stories: ['../src/stories/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-docs', '@storybook/addon-knobs', '@storybook/addon-actions', '@storybook/addon-viewport'],
    webpackFinal: async (config) => {
        // 追加自定义loader规则
        config.module.rules.push(
            {
                test: /\.(scss|sass)$/,
                use: ["style-loader", "css-loader", "sass-loader"],
                include: path.resolve(__dirname, "../")
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]'
                },
                include: path.resolve(__dirname, "../src/fonts")
            },
            {
                test: /\.(jpg|png|svg)$/,
                loader: 'url-loader',
                options: {
                    limit: 25000,
                }
            }
        );
        // 合并resolve配置
        config.resolve = {
            ...config.resolve,
            alias: {
                ...config.resolve.alias,
                i18n: resolve('../src/i18n'),
            },
            extensions: ['.js', '.jsx'],
            modules: ['node_modules'],
        };
        config.watch = true;
        return config;
    }
}

步骤2：卸载不兼容依赖

执行以下命令移除冲突依赖：

yarn remove extract-text-webpack-plugin storybook-addon-specifications

步骤3：清理缓存重新安装依赖

rm -rf node_modules yarn.lock
yarn cache clean
yarn install

步骤4：启动Storybook验证

执行yarn start启动，初始构建即可正常加载所有stories，不会再报extend相关错误。

内容的提问来源于stack exchange，提问作者Sheep Snow