添加msw-storybook-addon后Webpack解析失败及配置问题求助

1. 调整Storybook的Webpack配置（独立处理，不修改主项目配置） #

问题出在strict-event-emitter等依赖使用了未转译的ES6+语法，Storybook默认不对node_modules内的包做转译，需针对性配置：

• 编辑或创建.storybook/main.js，添加Webpack转译规则：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'msw-storybook-addon'
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: /node_modules\/(strict-event-emitter|@mswjs)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    });
    return config;
  },
};

• 安装必要的Babel依赖：

yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader

2. 恢复主项目配置文件 #

将config-override.js恢复到修改前的状态，或直接移除新增的配置。主项目与Storybook的Webpack配置应分开处理，避免互相干扰导致启动卡住。

3. 修正msw-storybook-addon的预览配置 #

确保.storybook/preview.js使用官方标准配置：

import { initialize, mswDecorator } from 'msw-storybook-addon';

initialize({
  serviceWorker: {
    url: '/mockServiceWorker.js',
  },
});

export const decorators = [mswDecorator];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

4. 清理缓存并验证启动 #

• 清理缓存文件：

yarn cache clean
rm -rf node_modules/.cache storybook-static

• 启动Storybook：

start-storybook -p 9009 -s public

• 启动主项目：

yarn start

内容的提问来源于stack exchange，提问作者Andi Keikha