从Angular 12升级到14后Storybook构建报错：TypeError

问题详情 #

原本基于Webpack 5构建Storybook的Angular 12项目，升级到Angular 14后Storybook构建失败，报错：

TypeError: The 'compilation' argument must be an instance of Compilation

已尝试直接安装Webpack、添加overrides配置锁定Webpack 5.75.0版本，但npm ls webpack输出与Angular 12时正常运行的结果一致：

├─┬ @angular-devkit/build-angular@14.2.10
│ ├─┬ @angular-devkit/build-webpack@0.1402.10
│ │ └── webpack@5.75.0 deduped
│ ├─┬ @ngtools/webpack@14.2.10
│ │ └── webpack@5.75.0 deduped
│ ├─┬ babel-loader@8.2.5
│ │ └── webpack@5.74.0 deduped
│ ├─┬ copy-webpack-plugin@11.0.0
│ │ └── webpack@5.75.0 deduped
│ ├─┬ css-loader@6.7.1
│ │ └── webpack@5.75.0 deduped
│ ├─┬ less-loader@11.0.0
│ │ └── webpack@5.75.0 deduped
│ ├─┬ mini-css-extract-plugin@2.6.1
│ │ └── webpack@5.75.0 deduped
│ ├─┬ postcss-loader@7.0.1
│ │ └── webpack@5.75.0 deduped
│ ├─┬ sass-loader@13.0.2
│ │ └── webpack@5.75.0 deduped
│ ├─┬ source-map-loader@4.0.0
│ │ └── webpack@5.75.0 deduped
│ ├─┬ stylus-loader@7.0.0
│ │ └── webpack@5.75.0 deduped
│ ├─┬ webpack-dev-middleware@5.3.3
│ │ └── webpack@5.75.0 deduped
│ ├─┬ webpack-dev-server@4.11.0
│ │ └── webpack@5.75.0 deduped
│ ├─┬ webpack-subresource-integrity@5.1.0
│ │ └── webpack@5.75.0 deduped
│ └── webpack@5.74.0
├─┬ @cypress/webpack-preprocessor@5.16.0
│ ├─┬ babel-loader@8.3.0
│ │ └── webpack@5.75.0 deduped
│ └── webpack@5.75.0 deduped
├─┬ @storybook/addon-essentials@6.5.14
│ └─┬ @storybook/core-common@6.5.14
│   ├─┬ fork-ts-checker-webpack-plugin@6.5.2
│   │ └── webpack@4.46.0 deduped
│   └─┬ webpack@4.46.0
│     └─┬ terser-webpack-plugin@1.4.5
│       └── webpack@4.46.0 deduped
├─┬ @storybook/angular@6.5.14
│ ├─┬ @storybook/core@6.5.14
│ │ ├─┬ @storybook/core-server@6.5.14
│ │ │ ├─┬ @storybook/builder-webpack4@6.5.14
│ │ │ │ ├─┬ css-loader@3.6.0
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ file-loader@6.2.0
│ │ │ │ │ └── webpack@5.75.0 deduped
│ │ │ │ ├─┬ html-webpack-plugin@4.5.2
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ postcss-loader@4.3.0
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ style-loader@1.3.0
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ terser-webpack-plugin@4.2.3
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ url-loader@4.1.1
│ │ │ │ │ └── webpack@5.75.0 deduped
│ │ │ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ webpack-filter-warnings-plugin@1.2.1
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ └─┬ webpack@4.46.0
│ │ │ │   └─┬ terser-webpack-plugin@1.4.5
│ │ │ │     └── webpack@4.46.0 deduped
│ │ │ ├─┬ @storybook/manager-webpack4@6.5.14
│ │ │ │ ├─┬ css-loader@3.6.0
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ html-webpack-plugin@4.5.2
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ style-loader@1.3.0
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ terser-webpack-plugin@4.2.3
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ └─┬ webpack@4.46.0
│ │ │ │   └─┬ terser-webpack-plugin@1.4.5
│ │ │ │     └── webpack@4.46.0 deduped
│ │ │ └─┬ webpack@4.46.0
│ │ │   └─┬ terser-webpack-plugin@1.4.5
│ │ │     └── webpack@4.46.0 deduped
│ │ └── webpack@5.75.0 deduped
│ ├─┬ postcss-loader@4.3.0
│ │ └── webpack@5.75.0 deduped
│ ├─┬ raw-loader@4.0.2
│ │ └── webpack@5.75.0 deduped
│ ├─┬ sass-loader@10.4.1
│ │ └── webpack@5.75.0 deduped
│ ├─┬ ts-loader@8.4.0
│ │ └── webpack@5.75.0 deduped
│ └── webpack@5.75.0 deduped
├─┬ @storybook/builder-webpack5@6.5.14
│ ├─┬ css-loader@5.2.7
│ │ └── webpack@5.75.0 deduped
│ ├─┬ fork-ts-checker-webpack-plugin@6.5.2
│ │ └── webpack@5.75.0 deduped
│ ├─┬ html-webpack-plugin@5.5.0
│ │ └── webpack@5.75.0 deduped
│ ├─┬ style-loader@2.0.0
│ │ └── webpack@5.75.0 deduped
│ ├─┬ terser-webpack-plugin@5.3.6
│ │ └── webpack@5.75.0 deduped
│ ├─┬ webpack-dev-middleware@4.3.0
│ │ └── webpack@5.75.0 deduped
│ └── webpack@5.75.0 deduped
├─┬ @storybook/manager-webpack5@6.5.14
│ ├─┬ @storybook/core-client@6.5.14
│ │ └── webpack@5.75.0 deduped
│ ├─┬ css-loader@5.2.7
│ │ └── webpack@5.75.0 deduped
│ ├─┬ webpack-dev-middleware@4.3.0
│ │ └── webpack@5.75.0 deduped
│ └── webpack@5.75.0 deduped
├─┬ ts-loader@9.4.2
│ └── webpack@5.75.0 deduped
└── webpack@5.75.0

问题根源 #

从依赖树可以看到，@storybook/addon-essentials@6.5.14依赖的@storybook/core-common@6.5.14引入了Webpack 4.46.0，虽然npm显示已deduped，但Webpack 4和5的Compilation实例不兼容，导致运行时类型校验失败。

解决方法 #

方法1：升级Storybook到兼容版本 #

将Storybook升级到7.x版本，该版本对Angular 14+支持更完善，且默认使用Webpack 5，彻底解决版本冲突问题。

方法2：强制锁定所有依赖的Webpack版本 #

在package.json中添加更严格的overrides配置，强制Storybook相关子依赖也使用Webpack 5.75.0：

"overrides": {
  "webpack": "5.75.0",
  "@storybook/core-common": {
    "webpack": "5.75.0"
  },
  "@storybook/builder-webpack4": {
    "webpack": "5.75.0"
  }
}

之后清理依赖重新安装：

rm -rf node_modules package-lock.json
npm install

方法3：确认Storybook使用Webpack 5构建器 #

检查.storybook/main.js配置文件，确保明确指定Webpack 5作为构建器：

module.exports = {
  core: {
    builder: 'webpack5'
  },
  // 其他配置项...
};

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