Yarn Workspace Monorepo下运行Storybook报createSnapshot未定义错误

根因 #

Yarn默认的依赖提升（hoisting）机制，会把根目录下给微前端应用准备的Webpack 5安装到根node_modules，导致UI库启动Storybook时，依赖解析优先级高于子包本地的依赖，最终出现Webpack实例版本不匹配，触发html-webpack-plugin读取createSnapshot方法时报错。

解决步骤 #

1. 配置Yarn禁止对应依赖被提升 #

根据使用的Yarn版本选择对应配置：

• Yarn Classic（v1）：在根目录package.json的workspaces字段下添加nohoist配置
  通用配置（全局限制相关依赖不提升）：

{
  "workspaces": {
    "packages": ["packages/*"],
    "nohoist": [
      "**/webpack",
      "**/html-webpack-plugin",
      "**/@storybook/**"
    ]
  }
}

如果需要避免影响其他微前端应用的依赖解析，可以精准指定仅UI库的相关依赖不提升：

{
  "workspaces": {
    "packages": ["packages/*"],
    "nohoist": [
      "packages/ui/**/webpack",
      "packages/ui/**/html-webpack-plugin",
      "packages/ui/**/@storybook/**"
    ]
  }
}

• Yarn Berry（v2+）：在UI库子包自身的package.json中添加依赖安装限制

{
  "installConfig": {
    "hoistingLimits": "dependencies"
  }
}

配置生效后，对应依赖只会安装在UI库的本地node_modules下，不会被提升到根目录共享。

2. 强制Storybook解析本地依赖 #

如果配置完nohoist后仍存在依赖解析优先级问题，在UI库的.storybook/main.js中手动调整模块解析顺序：

const path = require('path');
module.exports = {
  webpackFinal: async (config) => {
    // 优先从UI库本地node_modules解析依赖
    config.resolve.modules = [
      path.resolve(__dirname, '../node_modules'),
      ...config.resolve.modules
    ];
    return config;
  }
}

3. 校验依赖版本匹配 #

确认UI库本地的html-webpack-plugin与Webpack版本适配：

• Webpack 4 对应使用html-webpack-plugin@4及以下版本
• Webpack 5 对应使用html-webpack-plugin@5及以上版本

4. 重装依赖验证 #

修改配置后，删除根目录node_modules、yarn.lock以及所有子包的node_modules目录，重新执行yarn install安装依赖，确认UI库本地node_modules下存在独立的webpack、html-webpack-plugin目录，再启动Storybook验证。

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