使用msw模拟API时Storybook启动报ModuleParseError故障

在Storybook v6.5.13中使用msw包模拟API调用时，启动触发ModuleParseError错误，提示缺少适配的loader处理文件类型，关键错误信息如下：

ModuleParseError: Module parse failed: Unexpected character '#' (14:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
|  */
| class Emitter {
>     #events;
|     #maxListeners;
|     #hasWarnedAboutPotentialMemortyLeak;
    at handleParseError (\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:469:19)
    ...（省略重复栈追踪信息）
ModuleParseError: Module parse failed: Unexpected token (5:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| exports.MemoryLeakError = void 0;
| class MemoryLeakError extends Error {
>     emitter;
|     type;
|     count;
    at handleParseError (\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:469:19)
    ...（省略重复栈追踪信息）

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

当前Storybook配置文件内容：

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  stories: ["../src/**/*.stories.tsx", "../src/**/*.stories.mdx"],
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-controls",
    "@storybook/addon-knobs",
    "@storybook/addon-docs",
  ],
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

曾尝试切换至webpack5构建器，添加配置：

core : {
    builder : "webpack5"
  }

但安装对应依赖后构建过程卡住，已回退至webpack4环境。

方案1：配置Babel处理msw模块 #

问题根源是webpack4默认未启用对ES6+私有类字段、类属性的编译支持，而msw新版本代码使用了这些特性。需修改Storybook的webpack配置，让babel-loader处理msw相关模块：

1. 更新Storybook配置文件的webpackFinal部分：

webpackFinal: async (config) => {
  // 保留原有的TS路径解析配置
  config.resolve.plugins = [
    ...(config.resolve.plugins || []),
    new TsconfigPathsPlugin({
      extensions: config.resolve.extensions,
    }),
  ];

  // 添加规则，用Babel编译msw及其依赖模块
  config.module.rules.push({
    test: /\.(js|mjs|jsx)$/,
    include: /node_modules\/(msw|@mswjs)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', '@babel/preset-react'],
        plugins: [
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-proposal-private-methods',
          '@babel/plugin-proposal-private-property-in-object'
        ]
      }
    }
  });

  return config;
},

2. 安装所需的Babel依赖：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object babel-loader

方案2：降级msw到兼容版本 #

若不想修改Babel配置，可降级msw至未使用新ES语法的版本，例如0.47.0：

npm install msw@0.47.0 --save-dev

方案3：修复webpack5构建卡住问题 #

若仍想尝试webpack5，可排查以下方向：

• 确保@storybook/builder-webpack5和@storybook/manager-webpack5的版本与Storybook v6.5.13完全匹配
• 删除node_modules文件夹和锁文件（package-lock.json/yarn.lock）后重新安装所有依赖
• 暂时禁用非必要的Storybook插件，排查是否存在插件冲突

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