@storybook/addon-react-native-web构建webpack-dev-middleware时卡住求助

经排查，仅在将@storybook/addon-react-native-web添加到storybook/main.js时出现该问题，与插件安装无关。

• 降级插件版本：将@storybook/addon-react-native-web降至0.0.17版本，该版本在Storybook 6.5.x和react-native-web 0.18.x的环境下兼容性更稳定，可避免构建卡死。
• 手动配置Webpack：移除@storybook/addon-react-native-web依赖，在storybook/main.js中自定义Webpack规则适配react-native-web：

  module.exports = {
    addons: [
      // 保留其他必要addons，移除@storybook/addon-react-native-web
    ],
    webpackFinal: async (config) => {
      // 配置react-native-web别名
      config.resolve.alias = {
        ...config.resolve.alias,
        'react-native$': 'react-native-web',
      };
      // 调整babel-loader处理react-native相关代码
      config.module.rules.push({
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules(?!\/react-native-web)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react-app', 'module:metro-react-native-babel-preset'],
          },
        },
      });
      return config;
    },
  };
  

• 升级Storybook版本：将Storybook升级至7.x版本，新版本对react-native-web的支持更完善，且@storybook/addon-react-native-web在7.x生态中已修复部分构建阻塞问题。
• 禁用管理器缓存：修改package.json中的storybook启动脚本，添加--no-manager-cache参数：

  "scripts": {
    "storybook": "start-storybook -p 6006 --no-manager-cache"
  }
  

  避免缓存的管理器文件与插件规则冲突导致构建停滞。

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